: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); }

/* --- Hero --- */
.ab-hero{ padding:150px 0 72px; }
.ab-hero__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-8); align-items:center; }
.ab-title{ font-weight:600; font-size:clamp(2rem,1.35rem + 2.2vw,3rem); line-height:1.12; letter-spacing:-0.02em;
  color:#fff; margin:0 0 var(--sp-6); text-wrap:balance; }
.ab-title .hl{ color:var(--accent); }
.ab-lead p{ margin:0 0 var(--sp-4); font-size:clamp(1rem,0.95rem + .25vw,1.125rem); line-height:1.65; color:var(--text-2); max-width:44ch; }
.ab-lead p:last-child{ margin-bottom:0; }

/* hero visual: rack + blueprint nodes */
.ab-visual{ position:relative; height:520px; max-width:560px; margin-inline:auto; width:100%; }
.ab-lines{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.ab-lines path{ fill:none; stroke:rgba(56,182,245,.26); stroke-width:1.2; }
.ab-lines circle.j{ fill:rgba(120,200,255,.55); }
.ab-lines .sig{ fill:#EAF6FF; filter:drop-shadow(0 0 6px rgba(120,200,255,.95)); offset-rotate:0deg; }
.ab-lines .sig--l{ offset-path:path("M96 96 H150 V208 H196"); animation:ab-sig 9s linear infinite; }
.ab-lines .sig--r{ offset-path:path("M468 118 H410 V244 H372"); animation:ab-sig 11s linear infinite; animation-delay:3s; }
@keyframes ab-sig{ 0%{ offset-distance:0%; opacity:0; } 10%{ opacity:1; } 85%{ opacity:1; } 100%{ offset-distance:100%; opacity:0; } }

.ab-rack{ position:absolute; left:50%; transform:translateX(-50%); bottom:6px; width:250px;
  filter:drop-shadow(0 0 34px rgba(46,134,240,.22)); }
.ab-rack::after{ content:""; position:absolute; left:50%; bottom:-6px; transform:translateX(-50%);
  width:320px; height:56px; border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse at center, rgba(56,140,230,.28), transparent 70%);
  animation:ab-base 7s ease-in-out infinite; }
@keyframes ab-base{ 0%, 100%{ opacity:.65; } 50%{ opacity:1; } }
.ab-rack .led--p{ animation:ab-led 3.6s ease-in-out infinite; }
@keyframes ab-led{ 0%, 100%{ opacity:.45; } 50%{ opacity:1; } }

.ab-nodes{ display:contents; }
.ab-node{ position:absolute; width:96px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; }
.ab-node svg{ width:24px; height:24px; color:var(--accent-cyan); opacity:.9; }
.ab-node span{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); }
.ab-node--network{ left:2%; top:5%; } .ab-node--firewall{ left:0%; top:29%; }
.ab-node--servers{ left:2%; top:53%; } .ab-node--backup{ left:4%; top:77%; }
.ab-node--cloud{ right:2%; top:9%; } .ab-node--m365{ right:0%; top:41%; } .ab-node--users{ right:2%; top:73%; }

/* --- 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:900px){
  .ab-hero{ padding-top:120px; }
  .ab-hero__grid{ grid-template-columns:1fr; gap:var(--sp-7); }
  .ab-visual{ height:auto; padding-top:8px; }
  .ab-lines{ display:none; }
  .ab-rack{ position:relative; left:auto; transform:none; bottom:auto; margin:0 auto; width:210px; }
  .ab-nodes{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px 12px; margin-top:28px; }
  .ab-node{ position:static; width:auto; }
}
@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; }
  .ab-nodes{ grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion:reduce){
  .ab-lines .sig, .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-lines .sig, body.is-hidden .ab-tl__pulse, body.is-hidden .ab-rack::after{ animation-play-state:paused !important; }

/* ===== LEGAL / SITEMAP PAGES — simple text-first layout, same system ===== */
.lg-hero{ padding:150px 0 40px; }
.lg-title{ font-weight:600; font-size:clamp(2rem,1.35rem + 2.2vw,3rem); line-height:1.12; letter-spacing:-0.02em;
  color:#fff; margin:0 0 var(--sp-4); text-wrap:balance; }
.lg-updated{ font-size:14px; color:var(--text-muted); margin:0; }
.lg-body{ padding:0 0 56px; }

/* --- Sitemap link grid --- */
.sm-shell{ border:1px solid rgba(120,170,230,.16); border-radius:20px; padding:40px 44px;
  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); }
.sm-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:40px; }
.sm-group h2{ margin:0 0 18px; font-family:var(--font-mono); font-weight:500; font-size:12.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent-cyan); }
.sm-group ul{ margin:0; padding:0; list-style:none; display:grid; gap:14px; }
.sm-group a{ display:inline-flex; align-items:center; gap:10px; font-size:15px; color:var(--text-2); transition:color .2s ease; }
.sm-group a:hover, .sm-group a:focus-visible{ color:#fff; }
.sm-group a svg{ width:18px; height:18px; flex:none; color:var(--accent-cyan); opacity:.85; }
@media (max-width:760px){
  .sm-shell{ padding:32px 26px; }
  .sm-grid{ grid-template-columns:1fr; gap:30px; }
}

/* --- Legal prose content --- */
.lg-content{ max-width:760px; border:1px solid rgba(120,170,230,.16); border-radius:20px; padding:44px 48px;
  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); }
.lg-content h2{ font-weight:600; font-size:1.1875rem; color:#fff; margin:32px 0 14px; letter-spacing:-0.01em; }
.lg-content h2:first-child{ margin-top:0; }
.lg-content p{ margin:0 0 14px; font-size:15px; line-height:1.7; color:var(--text-2); }
.lg-content p:last-child{ margin-bottom:0; }
.lg-content ul{ margin:0 0 14px; padding-left:20px; list-style:disc; }
.lg-content li{ font-size:15px; line-height:1.7; color:var(--text-2); margin-bottom:8px; }
.lg-content li:last-child{ margin-bottom:0; }
.lg-content strong{ color:#fff; font-weight:600; }
.lg-content a{ color:var(--accent-cyan); text-decoration:underline; text-underline-offset:2px; }
.lg-content a:hover{ color:#fff; }
.lg-note{ margin-top:18px; padding:14px 18px; border-radius:10px; background:rgba(46,134,240,.08);
  border:1px solid rgba(120,170,230,.18); font-size:13.5px; line-height:1.6; color:var(--text-muted); }
@media (max-width:760px){
  .lg-content{ padding:30px 24px; }
}

/* ============================================================
   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 ===== */