:root{ --focus:#5AB4F5; }
.refs{ --focus:#4AA8F0; }
:focus-visible{ outline:2px solid var(--focus) !important; outline-offset:3px; }

/* ===== SHARED (header/buttons/tokens from Hero) ===== */
/* ============================================================
   IT011 — Homepage Hero v4  (refinement of v3)
   Refines only: globe scale/placement, motion (globe stationary, infrastructure animates), cursor lighting, "Signal Pulse", atmosphere depth, mobile spacing. Identity/typography/DS unchanged.
   ============================================================ */

:root{
  --bg:#070C16; --bg-2:#0A1120;
  --nav-bg:rgba(12,20,38,.55); --nav-border:rgba(120,170,230,.18);
  --text:#FFFFFF; --text-2:#B7C0CF; --text-muted:#8493A8;
  --accent:#2E86F0; --accent-strong:#1A5FD6; --accent-cyan:#38B6F5; --accent-on-dark:#5AB4F5;
  --btn-grad: linear-gradient(135deg,#2F90FF 0%,#1A5FD6 100%);
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;
  --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px;
  --container:1400px; --pad:var(--sp-6);
  --ease:cubic-bezier(0.16,1,0.3,1); --motion-fast:160ms var(--ease); --motion:260ms var(--ease);
  --font-sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SF Mono",Menlo,monospace;
  /* cursor-lighting state (set by JS, -1..1 / 0..1) — GPU-friendly */
  --lx:0; --ly:0; --bloom:0;
}

*, *::before, *::after{ box-sizing:border-box; }
html, body{ max-width:100%; overflow-x:clip; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{ margin:0; font-family:var(--font-sans); font-size:16px; line-height:1.6; color:var(--text); background:var(--bg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
img, svg, video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; } ul{ margin:0; padding:0; list-style:none; } button{ font:inherit; cursor:pointer; }

.skip-link{ position:absolute; left:var(--sp-4); top:-60px; z-index:100; background:#fff; color:#0E1726;
  padding:var(--sp-3) var(--sp-4); border-radius:var(--radius-sm); transition:top var(--motion); }
.skip-link:focus{ top:var(--sp-4); }
:focus-visible{ outline:2px solid var(--accent-on-dark); outline-offset:3px; border-radius:4px; }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }

/* ===================== HEADER (unchanged) ===================== */
.site-header{ position:absolute; top:var(--sp-5); left:0; right:0; z-index:50; }
.nav-shell{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6);
  min-height:84px; padding:var(--sp-3) var(--sp-5) var(--sp-3) var(--sp-3);
  background:var(--nav-bg); border:1px solid var(--nav-border); border-radius:var(--radius-lg);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 10px 40px rgba(0,0,0,.35); }
.brand{ display:inline-flex; align-items:center; flex:none; }
.brand__logo{ height:76px; width:auto; filter:drop-shadow(0 6px 18px rgba(46,134,240,.35)); }
.brand__name{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
@media (prefers-reduced-motion:no-preference){
  .brand{ animation:logoIn 820ms var(--ease) both; }
  @keyframes logoIn{ from{opacity:0; transform:translateX(-42px) scale(.94);} to{opacity:1; transform:translateX(0) scale(1);} }
}
.primary-nav{ flex:1 1 auto; display:flex; justify-content:center; }
.primary-nav ul{ display:flex; align-items:center; gap:var(--sp-6); }
.primary-nav > ul > li > a{ display:inline-flex; align-items:center; gap:6px; font-weight:500; font-size:15.5px; color:var(--text); padding:var(--sp-2) 0; position:relative; }
.primary-nav > ul > li > a::after{ content:""; position:absolute; left:0; right:0; bottom:-4px; height:2px; background:var(--accent-cyan); transform:scaleX(0); transform-origin:left; transition:transform var(--motion-fast); }
.primary-nav > ul > li > a:hover::after{ transform:scaleX(1); }
.header-actions{ display:flex; align-items:center; gap:var(--sp-5); flex:none; }
.header-phone{ display:inline-flex; align-items:center; gap:var(--sp-3); }
.header-phone .ring{ width:40px; height:40px; flex:none; display:grid; place-items:center; border-radius:50%; border:1px solid var(--nav-border); background:rgba(46,134,240,.10); color:var(--accent-cyan); }
.header-phone .ring svg{ width:18px; height:18px; }
.header-phone__text{ line-height:1.15; }
.header-phone__num{ font-weight:600; font-size:16px; color:var(--text); letter-spacing:.01em; }
.header-phone__label{ font-size:12.5px; color:var(--text-muted); }
.top-arrow{ position:absolute; top:-14px; left:150px; width:120px; height:12px; pointer-events:none; opacity:.9; }

.btn{ display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-3); font-weight:600; font-size:16px; letter-spacing:.01em; line-height:1; padding:15px 24px; min-height:50px; border-radius:var(--radius-md); border:1px solid transparent; white-space:nowrap; transition:filter var(--motion-fast),border-color var(--motion-fast),background var(--motion-fast),transform var(--motion-fast); }
.btn svg{ width:18px; height:18px; } .btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--btn-grad); color:#fff; box-shadow:0 8px 24px rgba(26,95,214,.35); }
.btn--primary:hover{ filter:brightness(1.08); }
.btn--ghost{ background:rgba(255,255,255,.02); color:var(--text); border-color:rgba(255,255,255,.22); }
.btn--ghost:hover{ border-color:rgba(255,255,255,.5); background:rgba(255,255,255,.06); }
.btn--sm{ min-height:46px; padding:12px 20px; font-size:15px; }
.nav-toggle{ display:none; width:46px; height:46px; align-items:center; justify-content:center; background:rgba(255,255,255,.03); border:1px solid var(--nav-border); border-radius:var(--radius-sm); color:var(--text); }
.nav-toggle svg{ width:24px; height:24px; } .nav-toggle .icon-close{ display:none; }
.nav-toggle[aria-expanded="true"] .icon-open{ display:none; } .nav-toggle[aria-expanded="true"] .icon-close{ display:block; }

/* ===================== HERO — layered ===================== */
.hero{ position:relative; min-height:100svh; overflow:hidden; display:flex; align-items:center; color:var(--text); isolation:isolate; background:var(--bg); }

/* L1+L2: deep dark + CSS atmosphere */
.hero__atmos{ position:absolute; inset:0; z-index:-6; pointer-events:none;
  background: radial-gradient(80% 70% at 80% 28%, rgba(46,134,240,.13), transparent 60%),
              radial-gradient(70% 60% at 10% 92%, rgba(12,60,110,.15), transparent 60%), var(--bg); }
.hero__atmos::before{ content:""; position:absolute; inset:0;
  background-image: linear-gradient(to right, rgba(255,255,255,.03) 1px, transparent 1px),
                    linear-gradient(to bottom, rgba(255,255,255,.03) 1px, transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 100% at 74% 34%, #000 24%, transparent 74%);
          mask-image:radial-gradient(120% 100% at 74% 34%, #000 24%, transparent 74%); }

/* Faint optical haze + very subtle volumetric light (premium depth, no clutter) */
.hero__haze{ position:absolute; inset:0; z-index:-6; pointer-events:none;
  background: radial-gradient(50% 45% at 78% 34%, rgba(120,180,240,.10), transparent 70%);
  filter: blur(10px); }
.hero__volumetric{ position:absolute; top:-10%; right:2%; width:60%; height:120%; z-index:-6; pointer-events:none;
  background: linear-gradient(200deg, rgba(90,160,240,.08) 0%, rgba(90,160,240,0) 42%);
  transform: rotate(6deg); mix-blend-mode: screen; opacity:.8; animation: volShift 14s ease-in-out infinite; }
@keyframes volShift{ 0%, 100%{ opacity:.55; } 50%{ opacity:.9; } }

/* L3: CLEAN globe plate — smaller (~46%), pushed right, more negative space. STATIONARY. */
.hero__globe{ position:absolute; top:0; right:0; bottom:0; width:46%; z-index:-4; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, #000 40%, #000 100%);
          mask-image:linear-gradient(90deg, transparent 0%, #000 40%, #000 100%); }
.hero__globe img{ width:100%; height:100%; object-fit:cover; object-position:42% 46%; transform:scale(1.01); }

/* L3b: breathing glow + cursor-reactive lighting (moves 2–4%, no globe rotation) */
.hero__glow{ position:absolute; top:16%; right:9%; width:40vw; height:40vw; max-width:600px; max-height:600px; z-index:-4; pointer-events:none;
  background: radial-gradient(circle, rgba(46,134,240,.24) 0%, rgba(46,134,240,.06) 44%, transparent 68%);
  filter:blur(6px);
  transform: translate(calc(var(--lx)*14px), calc(var(--ly)*12px));
  animation: glowPulse 7s ease-in-out infinite; will-change: transform; }
@keyframes glowPulse{ 0%, 100%{opacity:.68; } 50%{opacity:1; } }
/* Bloom that lifts when cursor moves up */
.hero__bloom{ position:absolute; top:8%; right:16%; width:30vw; height:30vw; max-width:440px; max-height:440px; z-index:-4; pointer-events:none;
  background: radial-gradient(circle, rgba(120,200,255,.16), transparent 62%);
  opacity: calc(.25 + var(--bloom)*.55); transform: translate(calc(var(--lx)*8px), calc(var(--ly)*8px)); filter:blur(8px); }

/* L4a: orbital rings (very slow) */
.hero__orbits{ position:absolute; top:50%; right:11%; width:36vw; height:36vw; max-width:560px; max-height:560px; transform:translateY(-50%); z-index:-3; pointer-events:none; overflow:visible; }
.hero__orbits .ring{ fill:none; stroke:rgba(90,180,245,.18); stroke-width:1; transform-origin:center; }
.hero__orbits .ring--a{ animation:spin 70s linear infinite; }
.hero__orbits .ring--b{ animation:spin 96s linear infinite reverse; }
.hero__orbits .ring--c{ animation:spin 120s linear infinite; }
.hero__orbits .dot{ fill:#7CC8FF; filter:drop-shadow(0 0 6px rgba(90,180,245,.9)); }
.hero__orbits .orbit-dot-a{ transform-origin:center; animation:spin 70s linear infinite; }
.hero__orbits .orbit-dot-b{ transform-origin:center; animation:spin 96s linear infinite reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* L4b: ambient drifting signal dots (subtle, always-on) */
.hero__signals{ position:absolute; inset:0; z-index:-3; pointer-events:none; overflow:hidden; }
.hero__signals i{ position:absolute; width:3px; height:3px; border-radius:50%; background:#8FD0FF; box-shadow:0 0 8px 1px rgba(120,200,255,.7); opacity:0; animation:drift 8s linear infinite; }
.hero__signals i:nth-child(1){ right:26%; top:40%; animation-delay:0s; }
.hero__signals i:nth-child(2){ right:20%; top:54%; animation-delay:2.4s; }
.hero__signals i:nth-child(3){ right:32%; top:62%; animation-delay:4.8s; }
@keyframes drift{ 0%{opacity:0; transform:translate(0,0);} 14%{opacity:.9;} 86%{opacity:.9;} 100%{opacity:0; transform:translate(110px,70px);} }

/* L4c: occasional network pulse (expanding ring, slow cadence) */
.hero__netpulse{ position:absolute; top:38%; right:26%; width:14px; height:14px; z-index:-3; pointer-events:none; }
.hero__netpulse::before, .hero__netpulse::after{ content:""; position:absolute; inset:0; border-radius:50%; border:1px solid rgba(90,180,245,.5); animation:ping 8s ease-out infinite; }
.hero__netpulse::after{ animation-delay:4s; }
@keyframes ping{ 0%{ transform:scale(.4); opacity:.0;} 8%{opacity:.7;} 70%{opacity:0;} 100%{ transform:scale(6); opacity:0;} }

/* L4d: barely-visible drifting particles (not an obvious particle system) */
.hero__particles{ position:absolute; inset:0; z-index:-3; pointer-events:none; overflow:hidden; }
.hero__particles i{ position:absolute; width:2px; height:2px; border-radius:50%; background:rgba(150,200,255,.5); filter:blur(.3px); animation:float 34s linear infinite; opacity:.2; }
.hero__particles i:nth-child(1){ right:22%; top:30%; animation-delay:0s; }
.hero__particles i:nth-child(2){ right:34%; top:56%; animation-delay:-8s; }
.hero__particles i:nth-child(3){ right:15%; top:44%; animation-delay:-16s; }
.hero__particles i:nth-child(4){ right:40%; top:38%; animation-delay:-24s; }
.hero__particles i:nth-child(5){ right:28%; top:66%; animation-delay:-30s; }
@keyframes float{ 0%{ transform:translateY(0);} 50%{ transform:translateY(-26px);} 100%{ transform:translateY(0);} }

/* L4e: SIGNAL PULSE — JS spawns .pulse dots that travel a fiber path then fade */
.hero__pulses{ position:absolute; top:50%; right:11%; width:36vw; height:36vw; max-width:560px; max-height:560px; transform:translateY(-50%); z-index:-3; pointer-events:none; }
.pulse{ position:absolute; left:0; top:0; width:6px; height:6px; margin:-3px; border-radius:50%;
  background:#BFE4FF; box-shadow:0 0 10px 2px rgba(120,200,255,.85), 0 0 3px 1px #fff;
  offset-rotate:0deg; opacity:0; will-change: offset-distance, opacity; }
.pulse.run{ animation: signalTravel 1700ms cubic-bezier(0.4,0,0.2,1) forwards; }
@keyframes signalTravel{ 0%{ offset-distance:0%; opacity:0; } 12%{ opacity:1; } 82%{ opacity:1; } 100%{ offset-distance:100%; opacity:0; } }

/* L5: readability scrim */
.hero__scrim{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: linear-gradient(90deg, rgba(7,12,22,.97) 0%, rgba(7,12,22,.86) 32%, rgba(7,12,22,.45) 60%, rgba(7,12,22,.08) 100%),
              linear-gradient(180deg, rgba(7,12,22,.2) 0%, transparent 26%, transparent 72%, rgba(7,12,22,.5) 100%); }

/* L6: content */
.hero__inner{ width:100%; padding-top:132px; padding-bottom:120px; }
.hero__content{ max-width:640px; }
.hero__eyebrow{ display:inline-flex; align-items:center; gap:var(--sp-3); font-family:var(--font-mono); font-weight:500; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-cyan); margin:0 0 var(--sp-5); }
.hero__eyebrow::before{ content:""; width:26px; height:2px; background:var(--accent-cyan); }
.hero__title{ font-weight:600; font-size:clamp(2.5rem,1.4rem + 3.6vw,4rem); line-height:1.08; letter-spacing:-0.02em; margin:0 0 var(--sp-5); color:#fff; }
.hero__lead{ font-size:clamp(1.0625rem,1rem + .35vw,1.1875rem); line-height:1.6; color:var(--text-2); margin:0 0 var(--sp-7); max-width:34em; }
.hero__pillars{ display:grid; grid-template-columns:repeat(4,auto); gap:var(--sp-6); margin:0 0 var(--sp-7); }
.pillar{ display:flex; align-items:flex-start; gap:var(--sp-3); }
.pillar__icon{ width:30px; height:30px; flex:none; color:var(--accent-cyan); }
.pillar__icon svg{ width:30px; height:30px; stroke-width:1.5; }
.pillar__label{ font-weight:500; font-size:14.5px; line-height:1.3; color:var(--text); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-4); margin:0 0 var(--sp-7); }
.hero__divider{ height:1px; background:rgba(255,255,255,.10); margin:0 0 var(--sp-5); max-width:560px; }
.hero__trust{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-4); font-size:14px; color:var(--text-muted); }
.hero__trust .item{ display:inline-flex; align-items:center; gap:var(--sp-2); }
.hero__trust .item strong{ color:var(--text-2); font-weight:600; }
.hero__trust svg{ width:18px; height:18px; color:var(--accent-cyan); flex:none; }
.hero__trust .sep{ width:1px; height:16px; background:rgba(255,255,255,.16); }
.hero__scroll{ position:absolute; left:50%; bottom:var(--sp-6); transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:var(--sp-3); color:var(--text-muted); z-index:2; }
.hero__scroll .mouse{ width:26px; height:40px; border:1.5px solid rgba(255,255,255,.4); border-radius:var(--radius-pill); position:relative; }
.hero__scroll .mouse::after{ content:""; position:absolute; left:50%; top:8px; width:3px; height:7px; border-radius:2px; background:var(--accent-cyan); transform:translateX(-50%); animation:wheel 1.8s ease-in-out infinite; }
.hero__scroll .label{ font-family:var(--font-mono); font-size:12px; letter-spacing:.08em; }
.hero__scroll .chevron{ width:18px; height:18px; color:var(--text-muted); animation:bob 1.8s ease-in-out infinite; }
@keyframes wheel{ 0%, 100%{opacity:0; transform:translate(-50%,0);} 40%{opacity:1;} 80%{opacity:0; transform:translate(-50%,10px);} }
@keyframes bob{ 0%, 100%{transform:translateY(0); opacity:.5;} 50%{transform:translateY(4px); opacity:1;} }

body.is-hidden *{ animation-play-state:paused !important; }

/* ===================== RESPONSIVE ===================== */
@media (max-width:1180px){
  .brand__logo{ height:64px; } .primary-nav ul{ gap:var(--sp-5); } .header-phone__text{ display:none; }
  .hero__content{ max-width:560px; } .hero__globe{ width:50%; }
}
@media (max-width:900px){
  .top-arrow{ display:none; }
  .primary-nav{ position:fixed; inset:0 0 0 auto; width:min(360px,86vw); background:var(--bg-2); padding:96px var(--sp-6) var(--sp-8); z-index:60; transform:translateX(100%); transition:transform var(--motion); display:block; overflow-y:auto; box-shadow:-20px 0 60px rgba(0,0,0,.5); }
  .primary-nav.is-open{ transform:translateX(0); }
  .primary-nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  .primary-nav li{ border-bottom:1px solid rgba(255,255,255,.08); }
  .primary-nav > ul > li > a{ padding:var(--sp-5) 0; font-size:18px; } .primary-nav > ul > li > a::after{ content:none; } .nav-toggle{ display:inline-flex; }
  .header-actions .header-phone{ display:none; } .header-actions{ gap:var(--sp-3); }
  .mobile-cta{ display:flex; flex-direction:column; gap:var(--sp-4); margin-top:var(--sp-7); } .mobile-cta .btn{ width:100%; }
  .hero__globe{ width:66%; opacity:.9; } .hero__content{ max-width:620px; }
  .hero__volumetric{ display:none; }
}
@media (min-width:901px){ .mobile-cta{ display:none; } }

@media (max-width:620px){
  :root{ --pad:var(--sp-5); }
  .site-header{ top:var(--sp-4); }
  .nav-shell{ min-height:64px; padding:var(--sp-2) var(--sp-3); border-radius:var(--radius-md); gap:var(--sp-3); }
  .brand__logo{ height:48px; } .header-actions .btn{ display:none; } .header-actions{ gap:0; }
  /* Globe = upper atmospheric layer */
  .hero__globe{ width:100%; height:46%; top:0; bottom:auto; opacity:.8;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
            mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%); }
  .hero__globe img{ object-position:center 32%; }
  .hero__glow{ top:-2%; right:-8%; } .hero__bloom, .hero__particles, .hero__netpulse, .hero__pulses{ display:none; }
  .hero__orbits{ top:22%; right:-6%; }
  .hero__scrim{ background:linear-gradient(180deg, rgba(7,12,22,.28) 0%, rgba(7,12,22,.7) 40%, rgba(7,12,22,.96) 66%); }
  /* Refinement: lift content ~100px so logo→headline→CTA read immediately */
  .hero__inner{ padding-top:32vh; padding-bottom:88px; }
  .hero__content{ max-width:100%; }
  .hero__title{ font-size:clamp(1.9rem,1.2rem + 4.4vw,2.6rem); }
  .hero__pillars{ grid-template-columns:1fr 1fr; gap:var(--sp-5); }
  .hero__cta{ flex-direction:column; } .hero__cta .btn{ width:100%; }
  .hero__trust{ gap:var(--sp-3); } .hero__trust .sep{ display:none; }
  .hero__scroll{ display:none; }
}
@media (max-width:360px){ .brand__logo{ height:44px; } .nav-shell{ padding:var(--sp-2); } .hero__inner{ padding-top:30vh; } }

@media (prefers-reduced-motion:reduce){
  *, *::before, *::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; }
  .hero__glow, .hero__bloom{ transform:none !important; }
  .pulse{ display:none !important; }
}

/* [G] GLOBAL CONTINUITY SYSTEM (preview). One canvas; section atmospheres off. */
:root{ --rail-x: max(18px, calc(50% - 690px)); }
html{ background:#070C16; } body{ background:#070C16; position:relative; } main{ position:relative; z-index:1; }
.hero, .refs, .svc{ background:transparent !important; }
.hero__atmos, .hero__haze, .hero__volumetric, .hero__particles, .hero__signals, .hero__netpulse, .hero__pulses, .refs::before{ display:none !important; }
.refs__signal{ display:none !important; }
.hero__scrim{ background:
  radial-gradient(130% 100% at 2% 12%, rgba(7,12,22,.80) 0%, rgba(7,12,22,.45) 30%, rgba(7,12,22,.12) 52%, rgba(7,12,22,0) 70%) !important; }
.hp-atmos{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.hp-atmos__base{ position:absolute; inset:0;
  background:
    radial-gradient(70% 55% at 82% 6%, rgba(46,134,240,.18), transparent 60%),
    radial-gradient(60% 50% at 8% 96%, rgba(20,70,130,.16), transparent 62%),
    radial-gradient(52% 42% at 50% 52%, rgba(30,90,160,.06), transparent 72%),
    linear-gradient(180deg, #070C16 0%, #081020 45%, #060910 100%); }
.hp-atmos__bloom{ position:absolute; inset:0; filter:blur(6px);
  background:
    radial-gradient(38% 30% at 76% 22%, rgba(56,140,230,.12), transparent 66%),
    radial-gradient(34% 26% at 22% 72%, rgba(40,110,200,.10), transparent 66%); }
.hp-atmos__trails::before, .hp-atmos__trails::after{ content:""; position:absolute; width:2px; height:170vh; top:-30vh; left:13%;
  background:linear-gradient(180deg, transparent, rgba(56,182,245,.16), transparent); filter:blur(1.4px); transform:rotate(17deg); }
.hp-atmos__trails::after{ left:auto; right:17%; height:190vh; opacity:.7; transform:rotate(-13deg); }
.hp-atmos__light{ position:absolute; top:0; left:0; width:70vw; height:70vw; max-width:940px; max-height:940px;
  transform:translate3d(calc(30vw + (var(--lx,0) * 46px)), calc(6vh + (var(--ly,0) * 42px)), 0);
  background:radial-gradient(circle, rgba(46,134,240,.12), transparent 62%); filter:blur(16px); }
.hp-atmos__stars{ position:absolute; top:0; left:0; width:2px; height:2px; border-radius:50%; background:transparent; }
.hp-atmos__stars--far{ box-shadow:926px 1146px 0 0 rgba(188,210,238,.5), 1754px 953px 0 0 rgba(188,210,238,.5), 925px 1040px 0 0 rgba(188,210,238,.5), 1751px 1202px 0 0 rgba(188,210,238,.5), 388px 378px 0 0 rgba(188,210,238,.5), 1646px 1048px 0 0 rgba(188,210,238,.5), 974px 1289px 0 0 rgba(188,210,238,.5), 1257px 381px 0 0 rgba(188,210,238,.5), 192px 914px 0 0 rgba(188,210,238,.5), 621px 290px 0 0 rgba(188,210,238,.5), 185px 1103px 0 0 rgba(188,210,238,.5), 1658px 1299px 0 0 rgba(188,210,238,.5), 85px 1219px 0 0 rgba(188,210,238,.5), 811px 927px 0 0 rgba(188,210,238,.5), 1339px 1260px 0 0 rgba(188,210,238,.5), 1331px 322px 0 0 rgba(188,210,238,.5), 1276px 30px 0 0 rgba(188,210,238,.5), 1703px 1082px 0 0 rgba(188,210,238,.5), 129px 121px 0 0 rgba(188,210,238,.5), 73px 389px 0 0 rgba(188,210,238,.5), 1801px 495px 0 0 rgba(188,210,238,.5), 1228px 61px 0 0 rgba(188,210,238,.5), 1593px 950px 0 0 rgba(188,210,238,.5), 668px 902px 0 0 rgba(188,210,238,.5), 1210px 400px 0 0 rgba(188,210,238,.5), 1063px 478px 0 0 rgba(188,210,238,.5), 1311px 602px 0 0 rgba(188,210,238,.5), 1023px 9px 0 0 rgba(188,210,238,.5), 1356px 174px 0 0 rgba(188,210,238,.5), 936px 569px 0 0 rgba(188,210,238,.5), 833px 1128px 0 0 rgba(188,210,238,.5), 1908px 170px 0 0 rgba(188,210,238,.5), 1449px 520px 0 0 rgba(188,210,238,.5), 645px 470px 0 0 rgba(188,210,238,.5), 1050px 591px 0 0 rgba(188,210,238,.5), 60px 143px 0 0 rgba(188,210,238,.5), 1153px 221px 0 0 rgba(188,210,238,.5), 820px 220px 0 0 rgba(188,210,238,.5), 1733px 595px 0 0 rgba(188,210,238,.5), 791px 136px 0 0 rgba(188,210,238,.5); opacity:.55; }
.hp-atmos__stars--near{ box-shadow:1122px 155px 0 0 rgba(150,200,255,.85), 708px 1225px 0 0 rgba(150,200,255,.85), 1730px 1240px 0 0 rgba(150,200,255,.85), 591px 177px 0 0 rgba(150,200,255,.85), 1045px 704px 0 0 rgba(150,200,255,.85), 804px 850px 0 0 rgba(150,200,255,.85), 38px 66px 0 0 rgba(150,200,255,.85), 212px 910px 0 0 rgba(150,200,255,.85), 1335px 460px 0 0 rgba(150,200,255,.85), 1644px 715px 0 0 rgba(150,200,255,.85), 175px 1019px 0 0 rgba(150,200,255,.85), 674px 1244px 0 0 rgba(150,200,255,.85), 1110px 859px 0 0 rgba(150,200,255,.85), 1712px 408px 0 0 rgba(150,200,255,.85), 915px 349px 0 0 rgba(150,200,255,.85), 449px 888px 0 0 rgba(150,200,255,.85), 1605px 835px 0 0 rgba(150,200,255,.85), 1380px 1152px 0 0 rgba(150,200,255,.85), 1072px 402px 0 0 rgba(150,200,255,.85), 1113px 865px 0 0 rgba(150,200,255,.85), 611px 569px 0 0 rgba(150,200,255,.85), 1048px 450px 0 0 rgba(150,200,255,.85), 1676px 841px 0 0 rgba(150,200,255,.85), 1609px 967px 0 0 rgba(150,200,255,.85); opacity:.9; will-change:transform; }
.hp-fiber{ position:fixed; top:0; bottom:0; left:var(--rail-x); width:2px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, transparent 0%, rgba(56,182,245,.34) 5%, rgba(56,182,245,.42) 50%, rgba(56,182,245,.34) 95%, transparent 100%);
  box-shadow:0 0 16px rgba(56,182,245,.30); }
.hp-signal{ position:fixed; left:calc(var(--rail-x) - 3.5px); top:-6%; width:9px; height:9px; border-radius:50%; z-index:0; pointer-events:none;
  background:radial-gradient(circle,#EAF6FF 0%,#38B6F5 55%,transparent 72%); box-shadow:0 0 16px 4px rgba(120,200,255,.85);
  animation:hp-flow 8s linear infinite; }
.hp-signal::before{ content:""; position:absolute; left:3.5px; bottom:8px; width:2px; height:64px; border-radius:2px;
  background:linear-gradient(180deg, transparent, rgba(120,200,255,.55)); }
@keyframes hp-flow{ 0%{ top:-6%; opacity:0; } 8%{ opacity:1; } 88%{ opacity:1; } 100%{ top:104%; opacity:0; } }
body.is-hidden .hp-signal, body.is-hidden .hp-atmos *{ animation-play-state:paused !important; }
@media (max-width:760px){ .hp-fiber, .hp-signal, .hp-atmos__trails{ display:none; } }
@media (prefers-reduced-motion:reduce){ .hp-signal{ display:none; } .hp-atmos__stars--near{ transform:none !important; } }

/* ===== Sticky header — ONE rounded glass container (same language as the footer shell, same .container max-width/alignment/margins; never touches viewport edges) ===== */
html{ scroll-padding-top:96px; }
.site-header{ position:fixed; top:0; left:0; right:0; z-index:60; padding-block:12px;
  background:transparent; border-bottom:none; box-shadow:none;
  transition: padding .25s ease; }
.site-header .nav-shell{ position:relative;
  background:linear-gradient(180deg, rgba(18,28,48,.55) 0%, rgba(10,17,32,.68) 100%);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(120,170,230,.16); border-radius:18px;
  box-shadow:0 10px 34px rgba(0,0,0,.28), 0 0 60px rgba(46,134,240,.06);
  min-height:66px; transition:min-height .25s ease; }
.site-header .nav-shell::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  background:radial-gradient(60% 55% at 20% 0%, rgba(56,140,230,.08), transparent 65%); }
.site-header.is-scrolled{ padding-block:6px; }
.site-header.is-scrolled .nav-shell{ min-height:56px; }

/* ===== TASK 3: active nav highlight ===== */
.primary-nav > ul > li > a{ transition: color .22s ease; }
.primary-nav > ul > li > a.is-current{ color:#fff; }
.primary-nav > ul > li > a.is-current::after{ transform:scaleX(1); }

/* ===== FOOTER — glass (reference: 'referentna slika za footer.png', option 02) ===== */
.site-footer{ position:relative; z-index:1; padding:0 0 40px; }
.footer-shell{ position:relative; border:1px solid rgba(120,170,230,.16); border-radius:20px;
  background:linear-gradient(180deg, rgba(18,28,48,.55) 0%, rgba(10,17,32,.68) 100%);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(0,0,0,.35), 0 0 80px rgba(46,134,240,.08); overflow:hidden; }
.footer-shell::before{ content:""; position:absolute; inset:0; pointer-events:none; border-radius:20px;
  background:radial-gradient(60% 40% at 18% 0%, rgba(56,140,230,.10), transparent 65%); }

/* brand + 4 nav kolone (kolona "Rešenja" uklonjena — duplirala je Usluge) */
.footer-grid{ display:grid; grid-template-columns:1.35fr repeat(3,1fr) 1.25fr; }
.footer-col{ padding:44px 28px 40px; }
.footer-col + .footer-col{ border-left:1px solid rgba(120,170,230,.10); }

.footer-brand .footer-logo{ height:52px; width:auto; margin-bottom:20px;
  filter:drop-shadow(0 4px 14px rgba(46,134,240,.30)); }
.footer-brand p{ margin:0; font-size:16px; line-height:1.55; color:#B7C0CF; }

.footer-col h4{ margin:0 0 18px; font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:500;
  font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:#4AA8F0; }
.footer-col ul{ margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.footer-col ul a{ font-size:14.5px; color:#AEB8C7; text-decoration:none; transition:color .2s ease; }
.footer-col ul a:hover, .footer-col ul a:focus-visible{ color:#fff; }

.footer-contact li{ display:flex; align-items:flex-start; gap:10px; font-size:14.5px; color:#AEB8C7; }
.footer-contact svg{ width:17px; height:17px; flex:none; margin-top:2px; color:#4AA8F0; }
.footer-contact a{ color:inherit; } .footer-contact a:hover{ color:#fff; }

/* Zakonski podaci o privrednom društvu (poslovno ime, PIB, MB). Sitan otisak:
   isti mono-labeli kao naslovi kolona, ali manji, tako da nose informaciju a
   ne otimaju pažnju od kontakata iznad. Odvojeno vlasovnom linijom. */
.footer-legal{ margin:22px 0 0; padding-top:18px;
  border-top:1px solid rgba(120,170,230,.10); display:grid; gap:14px; }
.footer-legal dt{ font-family:"IBM Plex Mono",ui-monospace,monospace; font-weight:500;
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:#7E8CA0; margin:0 0 5px; }
.footer-legal dd{ margin:0; font-size:12.5px; line-height:1.5; color:#9AA6B6; }
.footer-legal__ids{ display:flex; flex-wrap:wrap; gap:10px 30px; }
.footer-legal__ids dd{ font-family:"IBM Plex Mono",ui-monospace,monospace; letter-spacing:.04em; }

.footer-bottom{ display:flex; align-items:center; justify-content:space-between; gap:16px 28px; flex-wrap:wrap;
  padding:18px 28px; border-top:1px solid rgba(120,170,230,.12); font-size:13px; color:#8493A8; }
.footer-bottom .legal{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.footer-bottom .legal a{ color:#8493A8; transition:color .2s ease; }
.footer-bottom .legal a:hover{ color:#fff; }
.footer-bottom .legal .dot{ width:3px; height:3px; border-radius:50%; background:rgba(132,147,168,.55); }
.footer-bottom .motto{ color:#8493A8; }

@media (max-width:1180px){
  .footer-grid{ grid-template-columns:repeat(3,1fr); }
  .footer-brand{ grid-column:1 / -1; border-bottom:1px solid rgba(120,170,230,.10); padding-bottom:28px; }
  /* brand zauzima ceo prvi red, pa preostale kolone kreću od 2. deteta:
     3n+2 pogađa tačno prvo dete svakog reda, koje ne sme imati levu liniju. */
  .footer-grid .footer-col:nth-child(3n+2){ border-left:none; }
  .footer-col{ padding:32px 24px; }
}
@media (max-width:640px){
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .footer-grid .footer-col{ border-left:none !important; padding:24px 20px; }
  /* kolona, ne <ul> unutar nje — stari selektor nije bio grid item pa nije radio.
     Kontakt ide preko cele širine da adresa i pravni podaci ne bi pucali u
     163px koloni. Kompanija je ostajala sama u redu sa praznom polovinom pored
     sebe, pa i ona ide preko cele širine, a linkovi se unutar nje slažu u dve
     kolone — red je popunjen umesto da zjapi. */
  .footer-contact-col{ grid-column:1 / -1; border-top:1px solid rgba(120,170,230,.10); }
  .footer-col--wide{ grid-column:1 / -1; }
  .footer-col--wide ul{ grid-template-columns:1fr 1fr; column-gap:20px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; padding:18px 20px; }
  .footer-brand .footer-logo{ height:44px; }
}

/* ===== ABOUT PAGE ("O nama") — same system as Homepage ===== */
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity 560ms cubic-bezier(0.16,1,0.3,1), transform 560ms cubic-bezier(0.16,1,0.3,1); }
.js .reveal.in{ opacity:1; transform:none; }

.ab-eyebrow{ font-family:var(--font-mono); font-weight:500; font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-cyan); margin:0 0 var(--sp-5); }

/* ============================================================
   IT PODRŠKA — HERO
   Built to the approved reference (design/concepts/assets/Managed-IT).
   Every number below was measured off that file: the mockup's container is
   1568px wide, the site's is 1336px, so reference px x 0.852 = the values here.
   The right-hand composition is one picture, not a set of independent boxes —
   it lives on a fixed 1004x720 stage, every box is placed in % of that stage
   and every type size is in cqw, so it scales as a single unit and holds the
   reference proportions at any width.
   ============================================================ */
.ms-hero{ padding:136px 0 64px; position:relative; }
.ms-hero__grid{ display:grid; grid-template-columns:37.3% 62.7%; align-items:center; }
.ms-hero__grid > *{ min-width:0; }

/* ---------- left column ---------- */
/* Widths are per-element, not per-column: in the reference the title runs to
   476px, the lead stops at 415px and the badge rows reach 582px, which is how
   they break 2 / 3 / 4+5 lines exactly as pictured. */
.ms-copy{ width:min(660px, 48vw); max-width:none; }
.ms-hero .ab-eyebrow{ margin:0 0 30px; }
/* 46px, not the reference's 50px: the mockup was set in a condensed face, and
   IBM Plex Sans needs 569px for "IT podrska za kompanije" where that face needed
   476. Dropping 4px keeps the two-line break and the block proportions of the
   reference, which read far more than the last 8%% of type size. */
.ms-title{ margin:0; max-width:min(528px, 36.5vw); font-weight:600; font-size:min(2.875rem, 3.15vw); line-height:1.22;
  letter-spacing:-0.022em; color:#fff; }
.ms-title .hl{ color:var(--accent); }
.ms-lead{ margin:30px 0 0; max-width:min(420px, 35vw); font-size:clamp(1rem, .93rem + .3vw, 1.125rem); line-height:1.88; color:var(--text-2); }

.ms-cta{ display:flex; flex-wrap:wrap; gap:17px; margin-top:34px; max-width:min(460px, 34vw); }
.ms-btn{ min-height:50px; padding:0 26px; border-radius:12px; font-size:15.5px; }
.ms-btn svg{ width:19px; height:19px; }

/* 660px for the same reason: the rows hold 4 + 5 chips exactly as pictured. */
.ms-badges{ display:flex; flex-wrap:wrap; gap:6px; margin-top:36px; max-width:min(620px, calc(45vw - 30px)); }
.ms-badges li{ display:inline-flex; align-items:center; gap:8px; height:41px; padding:0 11px;
  border:1px solid rgba(120,170,230,.18); border-radius:10px; background:rgba(18,28,48,.45);
  font-size:12px; font-weight:500; color:var(--text-2); white-space:nowrap; }
.ms-badges svg{ width:16px; height:16px; flex:none; color:var(--accent-cyan); }

/* ---------- right composition ---------- */
.ms-stage{
  position:relative; width:102%; aspect-ratio:1004 / 720;
  container-type:inline-size;                 /* every size inside is in cqw */
  --br:rgba(96,158,224,.26);
  --card:linear-gradient(180deg, rgba(13,27,52,.82) 0%, rgba(8,18,38,.88) 100%);
  --ok:#46C46C; --warn:#E9A13B;
}
.ms-stage > *{ position:absolute; }
.ms-wires{ inset:0; width:100%; height:100%; }
.ms-wires--m{ display:none; }
.ms-wires__line path{ fill:none; stroke:rgba(92,166,238,.34); stroke-width:1.3; stroke-dasharray:3 6; }
.ms-wires__dot circle{ r:3.2; fill:#DCF1FF; filter:drop-shadow(0 0 5px rgba(140,205,255,.95)); }

.ms-card, .ms-panel{ border:1px solid var(--br); border-radius:1.6cqw; background:var(--card);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  box-shadow:0 1.4cqw 3.4cqw rgba(0,0,0,.42), 0 0 5cqw rgba(46,134,240,.07); }

/* -- central panel -- */
.ms-panel{ left:24.9%; top:10.4%; width:50.3%; padding:2.9cqw 2.9cqw 1.8cqw; border-radius:2cqw;
  background:linear-gradient(180deg, rgba(9,20,41,.92) 0%, rgba(5,12,28,.95) 100%);
  box-shadow:0 2cqw 5cqw rgba(0,0,0,.5), 0 0 7cqw rgba(46,134,240,.10); }
.ms-panel__head{ display:flex; align-items:center; gap:1.7cqw; }
.ms-panel__icon{ width:5.5cqw; height:5.5cqw; flex:none; display:grid; place-items:center; border-radius:1.4cqw;
  background:linear-gradient(150deg,#3D82FF,#1E5AD8); color:#fff; box-shadow:0 0 2.6cqw rgba(50,120,240,.55); }
.ms-panel__icon svg{ width:3.2cqw; height:3.2cqw; }
.ms-panel__title{ margin:0; font-size:2cqw; font-weight:600; color:#fff; letter-spacing:-.01em; }
.ms-panel__state{ margin:.5cqw 0 0; display:flex; align-items:center; gap:.8cqw; font-size:1.3cqw; color:var(--text-2); }
.ms-panel__state i{ width:.85cqw; height:.85cqw; border-radius:50%; background:var(--ok); box-shadow:0 0 1cqw var(--ok); }

.ms-stats{ display:grid; grid-template-columns:repeat(4,1fr); margin:3.7cqw 0 0; padding:0 0 1.4cqw;
  border-bottom:1px solid rgba(96,158,224,.16); }
.ms-stats span{ display:block; font-size:1.35cqw; line-height:1.4; color:#9DB6D6; }
.ms-stats strong{ display:flex; align-items:baseline; gap:.7cqw; margin-top:.5cqw; line-height:1.25; font-size:2.45cqw; font-weight:600; color:#fff; }
.ms-stats em{ font-style:normal; font-size:1.25cqw; font-weight:500; color:var(--ok); }

.ms-panel__label{ margin:1.2cqw 0 .6cqw; line-height:1.5; font-size:1.55cqw; font-weight:500; color:#fff; }
.ms-tickets{ display:grid; gap:.85cqw; }
.ms-tickets li{ display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:1.1cqw;
  padding:.85cqw 1.4cqw; border-radius:1.2cqw; background:rgba(19,38,70,.62); border:1px solid rgba(96,158,224,.13); }
.ms-pri{ width:3.4cqw; height:3.4cqw; display:grid; place-items:center; border-radius:50%;
  font-size:1.25cqw; font-weight:600; color:#fff; }
.ms-pri--1{ background:#2E6BE0; } .ms-pri--2{ background:#2C5FC4; } .ms-pri--3{ background:#2E8F63; }
.ms-ticket__txt{ min-width:0; }
.ms-ticket__txt b{ display:block; line-height:1.35; font-size:1.5cqw; font-weight:500; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ms-ticket__txt i{ display:block; margin-top:.2cqw; line-height:1.35; font-style:normal; font-size:1.28cqw; color:#93A9C6;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ms-ticket__time{ font-size:1.25cqw; color:#8FA5C2; white-space:nowrap; }
.ms-tag{ padding:.55cqw 1cqw; border-radius:.7cqw; border:1px solid rgba(70,150,240,.55);
  font-size:1.2cqw; color:#7FBBFF; white-space:nowrap; }
.ms-panel__more{ display:flex; align-items:center; justify-content:center; gap:.7cqw;
  margin:2.3cqw 0 0; line-height:1.4; font-size:1.5cqw; font-weight:500; color:var(--accent-on-dark); }
.ms-panel__more svg{ width:1.7cqw; height:1.7cqw; }

/* -- satellite cards: icon on the left of a text column, exactly as in the
      reference (all three text lines share one left edge) -- */
.ms-card{ padding:1.55cqw 1.75cqw; }
.ms-card__main{ display:flex; align-items:flex-start; gap:1.6cqw; }
.ms-card__ico{ width:3.1cqw; height:3.1cqw; flex:none; margin-top:.2cqw; color:var(--accent-cyan); }
.ms-card__body{ min-width:0; flex:1 1 auto; }
/* 1.62cqw, not the 1.85cqw the reference cap-height implies: the mockup face is
   narrower, and at 1.85 "Microsoft 365" and "Endpoint status" broke onto a second
   line inside boxes the reference keeps to one. Only "Servers & Infrastructure"
   still wraps — exactly as it does in the mobile reference. */
.ms-card__t{ margin:0; font-size:1.62cqw; line-height:1.3; font-weight:500; color:#fff; }
.ms-card__row{ margin:1.1cqw 0 0; font-size:1.45cqw; line-height:1.4; color:var(--text-2); }
.ms-card__foot{ display:flex; align-items:center; justify-content:space-between; gap:1cqw;
  margin:.35cqw 0 0; font-size:1.45cqw; line-height:1.4; color:var(--text-2); }
.ms-ok{ color:var(--ok); }
.ms-check{ width:2.1cqw; height:2.1cqw; flex:none; display:grid; place-items:center; border-radius:50%;
  background:var(--ok); color:#04140A; }
.ms-check svg{ width:1.3cqw; height:1.3cqw; }
.ms-card__val{ font-size:1.6cqw; font-weight:600; color:#fff; }
/* Backup carries a timestamp in the icon column, under the icon itself. */
.ms-card__lead{ display:flex; flex-direction:column; align-items:center; gap:.8cqw; flex:none; }
.ms-card__aside{ font-size:1.05cqw; line-height:1.3; text-align:center; color:#7E93B0; white-space:nowrap; }

.ms-card--mon{  left:3.4%;  top:20.1%; width:19.0%; }
/* Servers rides 2.3% higher than the reference so its two-line title clears
   Backup, which stays exactly where the reference puts it — the badge block
   below the copy has to land just under Backup's lower edge, as it does there. */
.ms-card--srv{  left:0.4%;  top:38.0%; width:22.0%; }
.ms-card--bak{  left:0;     top:58.3%; width:22.4%; }
.ms-card--end{  left:56.3%; top:0;     width:22.9%; padding-bottom:0; overflow:hidden;
  background:linear-gradient(180deg, rgba(16,34,64,.92) 0%, rgba(10,22,45,.94) 100%); }
.ms-card--m365{ left:79.7%; top:10.4%; width:20.1%; }
.ms-card--net{  left:77.2%; top:30.6%; width:22.8%; padding-bottom:0; overflow:hidden; }
.ms-card--sec{  left:78.7%; top:58.3%; width:21.0%; }

.ms-card--end .ms-card__main{ justify-content:center; }
.ms-card--end .ms-card__body{ flex:0 0 auto; }
.ms-end__nums{ display:grid; grid-template-columns:1fr 1fr; margin-top:1.2cqw; text-align:center; }
.ms-end__nums p{ margin:0; }
.ms-end__nums b{ display:block; font-size:2.3cqw; line-height:1.2; font-weight:600; color:#fff; }
.ms-end__nums i{ display:block; font-style:normal; font-size:1.15cqw; line-height:1.3; color:#93A9C6; }
.ms-end__nums .is-warn b, .ms-end__nums .is-warn i{ color:var(--warn); }
.ms-spark{ display:block; width:100%; margin-top:1.1cqw; }
.ms-spark--area{ height:4.5cqw; }
.ms-spark--net{ height:5.4cqw; margin-bottom:1.6cqw; }
.ms-spark__bar{ fill:rgba(120,170,235,.10); }
.ms-spark__fill{ fill:rgba(56,140,235,.30); }
.ms-spark__line{ fill:none; stroke:#BBD8F5; stroke-width:1.6; }
.ms-spark__line--ok{ stroke:var(--ok); stroke-width:2; }

/* -- pillars -- */
.ms-pillars{ left:14%; top:84%; width:72.9%; display:grid; grid-template-columns:repeat(5,1fr); gap:1cqw; }
.ms-pillars li{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:1.1cqw; }
.ms-pillars svg{ width:2.9cqw; height:2.9cqw; color:var(--accent-cyan); }
.ms-pillars b{ font-size:1.55cqw; font-weight:500; line-height:1.35; color:#fff; }
.ms-pillars i{ font-style:normal; font-size:1.4cqw; line-height:1.4; color:#8FA5C2; }

/* ============================================================
   TABLET — below 1360 the copy can no longer sit beside the stage without
   running into its left-hand cards, so the stage moves under the copy and
   keeps the full desktop composition.
   ============================================================ */
@media (max-width:1360px){
  .ms-hero{ padding-top:126px; }
  .ms-hero__grid{ grid-template-columns:1fr; gap:44px; }
  .ms-copy{ width:auto; max-width:640px; }
  .ms-lead{ max-width:52ch; }
  /* One column: the title is no longer squeezed by the stage beside it, so it
     goes back to a normal fluid scale instead of the vw cap that keeps it clear
     of the Monitoring card above 1360. */
  .ms-title{ max-width:none; font-size:clamp(2rem, 1rem + 2.6vw, 2.875rem); }
  .ms-cta{ max-width:none; }
  .ms-badges{ max-width:none; }
  .ms-badges li{ font-size:13px; padding:0 14px; gap:8px; }
  .ms-stage{ margin-right:0; }
}

/* ============================================================
   MOBILE — its own layout, per the second reference: no Endpoint /
   Network health / pillars, and the four remaining cards flank the
   panel two per side. Measured off that file (stage 889x600).
   ============================================================ */
@media (max-width:820px){
  .ms-hero{ padding:104px 0 48px; }
  .ms-hero__grid{ gap:34px; }
  .ms-title{ font-size:clamp(1.75rem, 1.1rem + 2.9vw, 2.375rem); line-height:1.2; }
  .ms-lead{ margin-top:20px; line-height:1.72; }
  .ms-cta{ gap:12px; margin-top:24px; }
  .ms-btn{ height:52px; }
  .ms-badges{ gap:8px; margin-top:22px; }

  /* On mobile the reference makes the panel the composition: it spans the full
     height of the stage, with the four satellites hung off its sides. So the
     panel goes back into flow and sets the height, instead of a fixed ratio.
     The stage also bleeds past the container padding, as it does there (it
     covers 94.5% of the canvas width against the copy's 83%). */
  .ms-stage{ aspect-ratio:auto; width:calc(100% + 28px); margin-inline:-14px; }
  .ms-panel{ position:relative; left:auto; top:auto; }
  .ms-card--end, .ms-card--net, .ms-card--bak, .ms-pillars{ display:none; }
  /* Widths depart from the reference by ~4%: its canvas is ~800px wide, where a
     21% satellite is ~170px and holds "Sinhronizovano" plus its tick on one
     line. At phone widths that same 21% cannot, so the panel gives up 4.7% to
     the satellites. Positions, stacking and the three-part shape are unchanged. */
  .ms-panel{ padding:3.1cqw; margin-left:27.5%; width:46%; }
  .ms-card--mon{  left:0;     top:14.2%; width:26%; }
  .ms-card--srv{  left:0;     top:50.8%; width:26%; }
  .ms-card--m365{ left:74%;   top:14.2%; width:26%; }
  .ms-card--sec{  left:74%;   top:51.7%; width:26%; }
  /* last-resort guard: the tick drops below the label instead of escaping */
  .ms-card__foot{ flex-wrap:wrap; }
  /* The satellites are only ~21% of a 370px stage here, so the type is trimmed
     until each label fits its box; overflow:hidden is the guard against a
     stray long word escaping the rounded card. */
  .ms-card{ padding:2cqw 2.1cqw; overflow:hidden; }
  .ms-card__main{ gap:1.8cqw; }
  .ms-card__t{ font-size:2.25cqw; }
  .ms-card__ico{ width:4.2cqw; height:4.2cqw; }
  .ms-card__row, .ms-card__foot{ font-size:1.72cqw; }
  .ms-check{ width:2.5cqw; height:2.5cqw; } .ms-check svg{ width:1.6cqw; height:1.6cqw; }
  .ms-panel__title{ font-size:2.6cqw; } .ms-panel__state{ font-size:1.7cqw; }
  .ms-panel__icon{ width:6.8cqw; height:6.8cqw; } .ms-panel__icon svg{ width:4cqw; height:4cqw; }
  .ms-stats span{ font-size:1.7cqw; } .ms-stats strong{ font-size:3.1cqw; } .ms-stats em{ font-size:1.55cqw; }
  .ms-panel__label{ font-size:2cqw; }
  .ms-ticket__txt b{ font-size:1.9cqw; } .ms-ticket__txt i{ font-size:1.7cqw; }
  .ms-ticket__time{ font-size:1.55cqw; } .ms-tag{ font-size:1.5cqw; }
  .ms-pri{ width:4.2cqw; height:4.2cqw; font-size:1.55cqw; }
  .ms-panel__more{ font-size:1.9cqw; } .ms-panel__more svg{ width:2.1cqw; height:2.1cqw; }
  .ms-wires{ display:none; }
  .ms-wires--m{ display:block; }  /* isti specificitet, dolazi kasnije -> pobedjuje */
}

@media (max-width:520px){
  .ms-hero{ padding-top:96px; }
  .ms-cta{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .ms-btn{ padding-inline:14px; font-size:14px; }
  .ms-badges li{ height:38px; padding:0 12px; font-size:12.5px; gap:7px; }
  .ms-badges svg{ width:15px; height:15px; }
}

@media (prefers-reduced-motion:reduce){ .js .ms-stage.reveal{ opacity:1 !important; transform:none !important; } }

/* --- Timeline --- */
.ab-tl{ padding:56px 0 72px; }
.ab-tl__track{ position:relative; display:flex; margin:0; padding:0; list-style:none; }
.ab-tl__line{ position:absolute; left:0; right:0; top:7px; height:2px;
  background:linear-gradient(90deg, rgba(56,182,245,0), rgba(56,182,245,.35) 8%, rgba(56,182,245,.35) 92%, rgba(56,182,245,0));
  overflow:visible; }
.ab-tl__pulse{ position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle,#EAF6FF,#38B6F5 60%,transparent 75%); box-shadow:0 0 12px 3px rgba(120,200,255,.75);
  animation:ab-tl-pulse 14s linear infinite; }
@keyframes ab-tl-pulse{ 0%{ left:0%; opacity:0; } 6%{ opacity:1; } 94%{ opacity:1; } 100%{ left:calc(100% - 8px); opacity:0; } }
.ab-tl__track li{ flex:1 1 0; min-width:0; padding-right:12px; position:relative; }
.ab-tl__track .dot{ display:block; width:12px; height:12px; border-radius:50%; margin-bottom:18px;
  background:var(--bg-2); border:2px solid rgba(56,182,245,.65); box-shadow:0 0 10px rgba(56,182,245,.35); position:relative; z-index:1; }
.ab-tl__track strong{ display:block; font-weight:600; font-size:clamp(1.125rem,1rem + .5vw,1.375rem); color:#fff; letter-spacing:-0.01em; margin-bottom:6px; }
.ab-tl__track li > span:last-child{ font-size:13px; line-height:1.45; color:var(--text-muted); display:block; max-width:15ch; }

/* --- Four cards --- */
.ab-cards{ padding:24px 0 56px; }
.ab-cards__shell{ display:grid; grid-template-columns:repeat(4,1fr);
  border:1px solid rgba(120,170,230,.16); border-radius:20px;
  background:linear-gradient(180deg, rgba(18,28,48,.55) 0%, rgba(10,17,32,.68) 100%);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(0,0,0,.35), 0 0 80px rgba(46,134,240,.08); overflow:hidden; }
.ab-card{ padding:36px 28px; }
.ab-card + .ab-card{ border-left:1px solid rgba(120,170,230,.10); }
.ab-card > svg{ width:26px; height:26px; color:var(--accent-cyan); margin-bottom:16px; }
.ab-card h3{ margin:0 0 14px; font-family:var(--font-mono); font-weight:500; font-size:13px; letter-spacing:.16em; text-transform:uppercase; color:var(--accent-cyan); }
.ab-card p{ margin:0 0 12px; font-size:14.5px; line-height:1.6; color:var(--text-2); }
.ab-card p:last-child{ margin-bottom:0; }
.ab-vals{ margin:0; padding:0; list-style:none; display:grid; gap:12px; }
.ab-vals li{ display:flex; align-items:center; gap:10px; font-size:14.5px; color:var(--text-2); }
.ab-vals svg{ width:17px; height:17px; flex:none; color:var(--accent-cyan); }

/* --- Technologies --- */
.ab-tech{ padding:0 0 56px; }
.ab-tech__shell{ border:1px solid rgba(120,170,230,.16); border-radius:20px; padding:36px 40px;
  background:linear-gradient(180deg, rgba(18,28,48,.55) 0%, rgba(10,17,32,.68) 100%);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(0,0,0,.35), 0 0 80px rgba(46,134,240,.08); }
.ab-tech__row{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:22px 32px; margin:0; padding:0; list-style:none; }
.ab-tech__row li{ font-weight:600; font-size:15.5px; letter-spacing:.01em; color:#AEB8C7; opacity:.85; white-space:nowrap;
  transition:color .2s ease, opacity .2s ease; }
.ab-tech__row li:hover{ color:#fff; opacity:1; }
.ab-tech__note{ margin:26px 0 0; text-align:center; font-size:13.5px; color:var(--text-muted); }

/* --- CTA --- */
.ab-cta{ padding:0 0 72px; }
.ab-cta__shell{ display:flex; align-items:center; gap:24px;
  border:1px solid rgba(120,170,230,.16); border-radius:20px; padding:28px 32px;
  background:linear-gradient(180deg, rgba(18,28,48,.55) 0%, rgba(10,17,32,.68) 100%);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  box-shadow:0 20px 60px rgba(0,0,0,.35), 0 0 80px rgba(46,134,240,.08); }
.ab-cta__icon{ width:52px; height:52px; flex:none; display:grid; place-items:center; border-radius:50%;
  border:1px solid rgba(120,170,230,.25); background:rgba(46,134,240,.10); color:var(--accent-cyan); }
.ab-cta__icon svg{ width:24px; height:24px; }
.ab-cta__title{ margin:0; flex:1 1 auto; font-weight:500; font-size:clamp(1.0625rem,1rem + .4vw,1.25rem); line-height:1.5; color:var(--text-2); letter-spacing:0; }
.ab-cta__shell .btn{ flex:none; }

/* --- Responsive --- */
@media (max-width:1080px){
  .ab-cards__shell{ grid-template-columns:1fr 1fr; }
  .ab-card + .ab-card{ border-left:none; }
  .ab-card:nth-child(2), .ab-card:nth-child(4){ border-left:1px solid rgba(120,170,230,.10); }
  .ab-card:nth-child(3), .ab-card:nth-child(4){ border-top:1px solid rgba(120,170,230,.10); }
  .ab-tech__row{ justify-content:center; }
}
@media (max-width:760px){
  .ab-tl__track{ flex-direction:column; gap:26px; padding-left:22px; }
  .ab-tl__line{ left:5px; right:auto; top:6px; bottom:6px; width:2px; height:auto;
    background:linear-gradient(180deg, rgba(56,182,245,0), rgba(56,182,245,.35) 8%, rgba(56,182,245,.35) 92%, rgba(56,182,245,0)); }
  .ab-tl__pulse{ animation:ab-tl-pulse-v 14s linear infinite; left:-3px; top:0; }
  .ab-tl__track li{ padding-right:0; }
  .ab-tl__track .dot{ position:absolute; left:-22px; top:5px; margin:0; width:11px; height:11px; }
  .ab-tl__track li > span:last-child{ max-width:none; }
}
@keyframes ab-tl-pulse-v{ 0%{ top:0%; opacity:0; } 6%{ opacity:1; } 94%{ opacity:1; } 100%{ top:calc(100% - 8px); opacity:0; } }
@media (max-width:640px){
  .ab-cards__shell{ grid-template-columns:1fr; }
  .ab-card{ border-left:none !important; }
  .ab-card + .ab-card{ border-top:1px solid rgba(120,170,230,.10); }
  .ab-tech__shell{ padding:28px 22px; }
  .ab-tech__row{ gap:16px 22px; }
  .ab-tech__row li{ font-size:14px; white-space:normal; text-align:center; }
  .ab-cta__shell{ flex-direction:column; text-align:center; align-items:center; gap:18px; padding:28px 22px; }
}
@media (prefers-reduced-motion:reduce){
  .ab-tl__pulse{ display:none; }
  .ab-rack::after, .ab-rack .led--p{ animation:none; }
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
}
body.is-hidden .ab-tl__pulse{ animation-play-state:paused !important; }

/* ===== IT PODRŠKA PAGE ===== */
/* 8 equal cards */
.ip-take{ padding:8px 0 56px; }
.ip-take__head{ display:flex; align-items:center; gap:18px; margin:0 0 var(--sp-6); }
.ip-take__head::before, .ip-take__head::after{ content:""; flex:1; height:1px; background:rgba(120,170,230,.16); }
.ip-take__head h2{ margin:0; font-family:var(--font-mono); font-weight:500; font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-cyan); white-space:nowrap; }
.ip-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.ip-card{ border:1px solid rgba(120,170,230,.14); border-radius:16px; padding:26px 22px; text-align:center;
  background:linear-gradient(180deg, rgba(18,28,48,.45) 0%, rgba(10,17,32,.58) 100%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease; }
.ip-card:hover{ border-color:rgba(120,180,235,.34); transform:translateY(-2px); box-shadow:0 14px 40px rgba(0,0,0,.3); }
.ip-card svg{ width:30px; height:30px; margin:0 auto 14px; color:var(--accent-cyan); }
.ip-card h3{ margin:0 0 10px; font-weight:600; font-size:16.5px; color:#fff; letter-spacing:-0.01em; }
.ip-card p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--text-muted); }

/* two-column block: saradnja+tehnologije | zašto */
.ip-duo{ padding:0 0 56px; }
.ip-duo__grid{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px; align-items:stretch; }
.ip-panel{ border:1px solid rgba(120,170,230,.14); border-radius:16px; padding:30px 28px;
  background:linear-gradient(180deg, rgba(18,28,48,.45) 0%, rgba(10,17,32,.58) 100%);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.ip-panel > h2{ margin:0 0 var(--sp-6); font-family:var(--font-mono); font-weight:500; font-size:13px;
  letter-spacing:.18em; text-transform:uppercase; color:var(--accent-cyan); }

/* flow timeline (5 steps, signal pulse) */
.ip-flow{ position:relative; display:flex; margin:0 0 var(--sp-7); padding:0; list-style:none; }
.ip-flow__line{ position:absolute; left:26px; right:26px; top:26px; height:2px;
  background:linear-gradient(90deg, rgba(56,182,245,0), rgba(56,182,245,.3) 8%, rgba(56,182,245,.3) 92%, rgba(56,182,245,0)); }
.ip-flow__pulse{ position:absolute; top:-3px; left:0; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle,#EAF6FF,#38B6F5 60%,transparent 75%); box-shadow:0 0 12px 3px rgba(120,200,255,.7);
  animation:ip-pulse 12s linear infinite; }
@keyframes ip-pulse{ 0%{ left:0%; opacity:0; } 6%{ opacity:1; } 94%{ opacity:1; } 100%{ left:calc(100% - 8px); opacity:0; } }
.ip-flow li{ flex:1 1 0; min-width:0; padding-right:10px; position:relative; }
.ip-flow .ring{ position:relative; z-index:1; width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:var(--bg-2); border:1px solid rgba(90,180,245,.4); color:var(--accent-cyan); margin-bottom:14px; }
.ip-flow .ring svg{ width:22px; height:22px; }
.ip-flow .num{ font-family:var(--font-mono); font-size:12px; color:var(--accent-cyan); display:block; margin-bottom:4px; }
.ip-flow p{ margin:0; font-size:13px; line-height:1.45; color:var(--text-2); max-width:16ch; }

/* technologies chips */
.ip-tech{ display:flex; flex-wrap:wrap; gap:10px; margin:0; padding:0; list-style:none; }
.ip-tech li{ display:inline-flex; align-items:center; gap:8px; padding:8px 13px;
  border:1px solid rgba(120,170,230,.16); border-radius:9px; background:rgba(12,20,36,.45);
  font-size:13px; font-weight:500; color:var(--text-2); }
.ip-tech li::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--accent-cyan); opacity:.8; }
.ip-tech-note{ margin:var(--sp-5) 0 0; font-size:14px; font-weight:500; color:var(--accent-cyan); }

/* why panel (4 benefits) */
.ip-why{ display:grid; grid-template-columns:1fr 1fr; gap:26px 20px; }
.ip-why .ring{ width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:rgba(46,134,240,.08); border:1px solid rgba(90,180,245,.35); color:var(--accent-cyan); margin-bottom:12px; }
.ip-why .ring svg{ width:24px; height:24px; }
.ip-why h3{ margin:0 0 8px; font-weight:600; font-size:15.5px; color:#fff; }
.ip-why p{ margin:0; font-size:13px; line-height:1.5; color:var(--text-muted); }

/* larger CTA variant */
.ip-cta .ab-cta__shell{ padding:36px 36px; }
.ip-cta .ab-cta__icon{ width:64px; height:64px; }
.ip-cta .ab-cta__icon svg{ width:30px; height:30px; }
.ip-cta__text h2{ margin:0 0 8px; font-weight:600; font-size:clamp(1.25rem,1.1rem + .8vw,1.625rem); color:#fff; letter-spacing:-0.01em; }
.ip-cta__text p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--text-2); max-width:56ch; }

@media (max-width:1080px){
  .ip-grid{ grid-template-columns:repeat(2,1fr); }
  .ip-duo__grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  /* Centred timeline. Stacked but left-aligned, the rail sat 26px from the
     container edge and every step hugged it, leaving the whole right half of
     the screen empty; running the rail down the middle balances the column. */
  .ip-flow{ flex-direction:column; align-items:center; gap:26px; text-align:center; }
  .ip-flow li{ flex:0 0 auto; width:100%; padding-right:0;
    display:flex; flex-direction:column; align-items:center; }
  .ip-flow__line{ left:50%; right:auto; top:10px; bottom:10px; width:2px; height:auto; margin-left:-1px;
    background:linear-gradient(180deg, rgba(56,182,245,0), rgba(56,182,245,.3) 8%, rgba(56,182,245,.3) 92%, rgba(56,182,245,0)); }
  .ip-flow__pulse{ animation:ip-pulse-v 12s linear infinite; left:-3px; top:0; }
  .ip-flow p{ max-width:34ch; }
}
@keyframes ip-pulse-v{ 0%{ top:0%; opacity:0; } 6%{ opacity:1; } 94%{ opacity:1; } 100%{ top:calc(100% - 8px); opacity:0; } }
@media (max-width:560px){
  .ip-grid{ grid-template-columns:1fr; }
  .ip-why{ grid-template-columns:1fr; }
  .ip-cta .ab-cta__shell{ padding:28px 22px; }
}
@media (prefers-reduced-motion:reduce){ .ip-flow__pulse{ display:none; } }
body.is-hidden .ip-flow__pulse{ animation-play-state:paused !important; }

/* ==========================================================================
   SERVICE DESK — DEKORATIVNI INDIKATORI
   --------------------------------------------------------------------------
   Panel .ms-stage je ilustracija oblasti koje usluga pokriva, ne prikaz
   stvarnih operativnih podataka. Zato u njemu nema nijedne brojke: tamo gde
   je ranije stajala izmisljena metrika (SLA %, broj uredjaja, broj tiketa,
   vreme odziva) sada stoji neutralan graficki indikator bez vrednosti.
   Ovo je namerno resenje na SADRZAJNOM sloju — ono sto korisnik vidi i ono
   sto sajt semanticki tvrdi je isto. Raniji pristup sa CSS pseudo-elementima
   (Faza 4A) je uklonjen jer je razdvajao ta dva sloja.
   ========================================================================== */
.ms-ind{ display:block; height:.85cqw; border-radius:.5cqw;
  background:linear-gradient(90deg, rgba(56,182,245,.85) 0%,
                                    rgba(56,182,245,.30) 60%,
                                    rgba(96,158,224,.12) 100%); }

/* zadrzava visinu celije koju je ranije zauzimao broj */
.ms-stats strong{ align-items:center; min-height:3.06cqw; }
.ms-stats strong .ms-ind{ width:100%; }

.ms-end__nums b{ display:flex; align-items:center; justify-content:center; height:2.76cqw; }
.ms-end__nums b .ms-ind{ width:62%; }
.ms-end__nums .is-warn .ms-ind{ background:linear-gradient(90deg, rgba(233,161,59,.85) 0%,
                                    rgba(233,161,59,.30) 60%, rgba(233,161,59,.12) 100%); }

.ms-card__val{ display:flex; align-items:center; min-height:2.24cqw; }
.ms-card__val .ms-ind{ width:4.4cqw; }

/* lista oblasti vise nema kolonu za vreme */
.ms-tickets li{ grid-template-columns:auto 1fr auto; }

/* FAQ — koristi postojecu .ip-why mrezu; dodaje se samo boja linka */
.ip-faq a{ color:var(--accent-cyan); }
.ip-faq a:hover{ text-decoration:underline; }

/* Sidro ispod sticky zaglavlja. Zaglavlje je 126px na vrhu i 114px u
   skrolovanom stanju, pa 140px ostavlja 14-26px vazduha iznad naslova. */
.if-anchor{ scroll-margin-top:140px; }

/* ============================================================
   Prekidac jezika SR | EN
   Stoji kao prvi element u .header-actions, levo od telefona.
   Aktivan jezik se razlikuje po TRI signala, ne samo po boji:
   jaca boja + podvlaka + veca tezina fonta (+ aria-current za citace).
   Globalni :focus-visible iz jezgra pokriva fokus stanje.
   ============================================================ */
.lang-switch{ display:inline-flex; align-items:center; gap:var(--sp-2); flex:none;
  padding:6px 10px; border:1px solid var(--nav-border); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.03); font-size:13px; letter-spacing:.06em; line-height:1; }
.lang-switch__opt{ color:var(--text-muted); text-decoration:none; font-weight:500;
  padding-bottom:3px; border-bottom:2px solid transparent;
  transition:color var(--motion), border-color var(--motion); }
.lang-switch__opt:hover{ color:var(--text); }
.lang-switch__opt[aria-current]{ color:var(--accent-on-dark); font-weight:700;
  border-bottom-color:var(--accent-on-dark); }
.lang-switch__sep{ color:var(--nav-border); }

/* Prekidac zauzima ~79px u .header-actions. Zaglavlje je i PRE njega bilo na
   granici na uzim desktop sirinama — na 1180px su se "IT podrška" i "O nama"
   vec prelamali u dva reda, a na 1000px je CTA izlazio iz okvira. Zato se u
   toj zoni skupljaju iskljucivo RAZMACI. Tipografija, boje, visina zaglavlja
   i redosled elemenata ostaju netaknuti. */
@media (max-width:1400px){
  .primary-nav ul{ gap:var(--sp-5); }              /* 32 -> 24 */
  .lang-switch{ padding:5px 8px; letter-spacing:.04em; }
}
@media (max-width:1280px){
  .nav-shell{ gap:var(--sp-5); }                   /* 32 -> 24 */
  .primary-nav ul{ gap:var(--sp-4); }              /* 24 -> 16 */
  .header-actions{ gap:var(--sp-4); }              /* 24 -> 16 */
  .lang-switch{ padding:4px 7px; font-size:12px; gap:6px; }
}
/* 901–1180px je najtesnija zona: puna horizontalna navigacija je jos uvek
   prikazana (hamburger krece tek na 900px). Ovde prekidac gubi okvir i
   svodi se na cist tekst SR | EN, a razmaci se dodatno skupljaju — tacno
   onoliko koliko prekidac zauzima, da zaglavlje ostane kao pre njega.
   Nijedan element se ne uklanja: telefon i CTA su i dalje tu. */
@media (max-width:1180px){
  .nav-shell{ gap:var(--sp-4); }                   /* 24 -> 16 */
  .primary-nav ul{ gap:var(--sp-3); }              /* 16 -> 12 */
  .header-actions{ gap:var(--sp-3); }              /* 16 -> 12 */
  .lang-switch{ padding:0; border:0; background:none; gap:5px; font-size:12px; }
}
@media (max-width:1080px){
  /* Najuza tacka: osam stavki navigacije + logo + telefon + CTA vec ovde ne
     staju ni bez prekidaca (CTA je izlazio iz okvira i pre ove izmene).
     Ikonica telefona se sklanja jer je jedini duplikat — isti broj stoji u
     podnozju svake stranice, na kontakt stranici i u mobilnom meniju. */
  .header-phone{ display:none; }
  .primary-nav ul{ gap:10px; }
  .primary-nav > ul > li > a{ font-size:15px; }
}
@media (max-width:1000px){
  /* Poslednjih 100px pre nego sto hamburger preuzme navigaciju. Ovde je i
     zateceno stanje bilo preusko, pa se skupljaju razmaci i font navigacije. */
  .primary-nav ul{ gap:8px; }
  .primary-nav > ul > li > a{ font-size:14px; }
  .brand__logo{ height:56px; }
  .header-actions .btn--sm{ padding:12px 14px; }
}
@media (max-width:900px){
  /* hamburger preuzima navigaciju — prostor se vraca, prekidac dobija okvir nazad */
  .lang-switch{ padding:4px 8px; border:1px solid var(--nav-border);
    background:rgba(255,255,255,.03); gap:6px; }
}
@media (max-width:620px){ .lang-switch{ padding:4px 7px; font-size:12px; gap:6px; } }

/* ===== MOBILNA SIDEBAR NAVIGACIJA =====
   Zaglavlje, boje, tipografija i logo su nepromenjeni — menja se samo
   ponasanje i raspored panela ispod 900px.
   ===================================================================== */

/* Zatamnjenje postoji u DOM-u na svim sirinama (pravi ga JS jednom), ali je
   vidljivo samo dok je meni otvoren, i samo ispod 900px. */
.nav-scrim{ display:none; }

/* Zakljucavanje skrola je namerno CSS, a NE inline style iz JS-a: pravilo
   zivi unutar @media (max-width:900px), pa se pri prelasku na desktop sirinu
   samo prestane primenjivati. Stranica se ne moze zaglaviti sa zakljucanim
   skrolom ni ako nijedan resize dogadjaj ne stigne. */
@media (max-width:900px){
  html.nav-open, html.nav-open body{ overflow:hidden; }
  .nav-scrim{ display:block; }
}

@media (max-width:900px){

  /* --- 1) UZROK KVARA ---
     backdrop-filter na .nav-shell pravi containing block za position:fixed
     potomke, pa je drawer bio visok koliko i traka zaglavlja. Bez blura se
     fixed ponovo racuna od ekrana. Pozadina je zato neprozirnija, da traka
     i dalje izgleda kao staklo. */
  .site-header .nav-shell{
    -webkit-backdrop-filter:none; backdrop-filter:none;
    background:linear-gradient(180deg, rgba(18,28,48,.94), rgba(10,17,32,.96));
  }

  /* --- 2) PANEL: pun ekran, tri pojasa (odmak / stavke / dugmad) --- */
  .primary-nav{
    inset:0 0 0 auto;
    height:100vh; height:100dvh;
    width:min(340px,88vw);
    display:flex; flex-direction:column;
    padding:104px var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom));
    background:linear-gradient(180deg,#0C1526 0%, #080E1B 100%);
    border-left:1px solid rgba(120,170,230,.16);
    box-shadow:-24px 0 70px rgba(0,0,0,.55);
    overflow:hidden;                 /* skroluje unutrasnja lista, ne panel */
  }

  /* --- 2b) Zaglavlje ostaje IZNAD panela ---
     .primary-nav je position:fixed sa z-index:60, pa je prekrivao staticne
     susede — ukljucujuci hamburger, koji je u otvorenom stanju dugme za
     zatvaranje. Bez ovoga posetilac vidi meni, ali ne i nacin da ga zatvori.
     Logo, prekidac jezika i hamburger se zato dizu iznad panela. */
  .site-header .brand,
  .site-header .header-actions{ position:relative; z-index:61; }

  /* --- 3) STAVKE: sopstveni skrol, ugodne visine, jasan aktivan --- */
  .primary-nav > ul{
    flex:1 1 auto; min-height:0;
    overflow-y:auto; overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
    margin:0; padding:0;
  }
  .primary-nav li{ border-bottom:1px solid rgba(255,255,255,.07); }
  .primary-nav li:last-child{ border-bottom:0; }

  .primary-nav > ul > li > a{
    display:flex; align-items:center; justify-content:space-between;
    gap:var(--sp-4);
    padding:16px 14px 16px 12px;
    min-height:52px;
    font-size:16.5px; font-weight:500; letter-spacing:.01em;
    border-radius:var(--radius-sm);
    border-left:2px solid transparent;
    transition:background var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
  }
  /* strelica desno — cist CSS, bez novog markupa */
  .primary-nav > ul > li > a::before{
    content:""; order:2; flex:none; width:7px; height:7px;
    border-right:1.5px solid currentColor; border-top:1.5px solid currentColor;
    transform:rotate(45deg); opacity:.35;
  }
  .primary-nav > ul > li > a:hover,
  .primary-nav > ul > li > a:focus-visible{
    background:rgba(120,170,230,.07); color:#fff;
  }
  .primary-nav > ul > li > a.is-current{
    color:var(--accent-on-dark); font-weight:600;
    border-left-color:var(--accent-on-dark);
    background:rgba(90,180,245,.08);
  }
  .primary-nav > ul > li > a.is-current::before{ opacity:.7; }

  /* --- 4) DUGMAD: uvek na dnu, ne skroluju sa listom --- */
  .mobile-cta{
    flex:none; display:flex; flex-direction:column; gap:var(--sp-3);
    margin-top:var(--sp-5); padding-top:var(--sp-5);
    border-top:1px solid rgba(255,255,255,.10);
  }
  .mobile-cta .btn{ width:100%; justify-content:center; }

  /* --- 5) ZATAMNJENJE STRANICE: element pravi JS, bez izmene HTML-a --- */
  .nav-scrim{
    position:fixed; inset:0; z-index:55;
    background:rgba(4,8,16,.62);
    -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
    opacity:0; visibility:hidden;
    transition:opacity var(--motion), visibility var(--motion);
  }
  .nav-scrim.is-open{ opacity:1; visibility:visible; }
}

/* Niski ekrani (npr. 375x667): odmak odozgo manji da stane vise stavki */
@media (max-width:900px) and (max-height:700px){
  .primary-nav{ padding-top:88px; }
  .primary-nav > ul > li > a{ min-height:46px; padding-top:12px; padding-bottom:12px; }
}

@media (prefers-reduced-motion: reduce){
  .primary-nav, .nav-scrim{ transition:none; }
}
/* ===== kraj mobilne navigacije ===== */