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

/* ===== IT PODRŠKA PAGE ===== */
/* hero badges */
.ip-badges{ display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--sp-6); }
.ip-badges li{ display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  border:1px solid rgba(120,170,230,.18); border-radius:10px; background:rgba(18,28,48,.45);
  font-size:13px; font-weight:500; color:var(--text-2); }
.ip-badges svg{ width:15px; height:15px; color:var(--accent-cyan); }

/* hero diagram nodes (devices left, services right, firewall top, network bottom) */
.ip-servers{ position:absolute; left:50%; transform:translateX(-50%); top:20%; width:236px;
  filter:drop-shadow(0 0 30px rgba(46,134,240,.18)); }
.ab-node--ip-users{ left:1%; top:6%; }  .ab-node--ip-ws{ left:0%; top:30%; }
.ab-node--ip-laptop{ left:1%; top:54%; } .ab-node--ip-mobile{ left:3%; top:78%; }
.ab-node--ip-cloud{ right:1%; top:6%; }  .ab-node--ip-backup{ right:0%; top:30%; }
.ab-node--ip-mon{ right:1%; top:54%; }   .ab-node--ip-net{ right:3%; top:78%; }
.ab-node--ip-fw{ left:50%; top:0; transform:translateX(-50%); }
.ip-lines path{ stroke-dasharray:2 5; }

/* 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){
  .ip-flow{ flex-direction:column; gap:22px; }
  .ip-flow__line{ left:26px; right:auto; top:10px; bottom:10px; width:2px; height:auto;
    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:none; }
}
@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; }

/* ===== ISP PAGE ("Poslovni internet") ===== */
.isp-hero__cta{ display:flex; flex-wrap:wrap; gap:var(--sp-4); margin-top:var(--sp-6); position:relative; z-index:1; }

/* HERO right side = the fiber-optic cable photograph. The file is 16:9 and its
   left 40% is empty dark navy, measured mean luminance 10-14 against the
   canvas's 11.7, so the picture dissolves into the background with a mask
   alone. A mask only REMOVES pixels, so the cable and the strands are never
   darkened or veiled and nothing is painted on top of them. */
.isp-hero{ position:relative; overflow:hidden; }
.isp-hero .ab-hero__grid{ position:relative; z-index:1; }
.isp-heroart{ position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:55%; height:min(100%, 41vw); z-index:0; pointer-events:none;
  /* The height is tied to the width (55vw / 1.35) instead of simply filling the
     hero. cover scales this file by height, so a box that grows taller as the
     screen narrows quietly eats more and more of the picture's left side — at
     1600 the strands ended up inside the fade and lost brightness. Pinning the
     box near a 1.35 ratio keeps the crop at a steady ~24% everywhere, which is
     exactly the empty margin the file has to spare.
     Opaque by 24%: the first lit strand then lands at 27% of this box, so the
     fade finishes before it and not a single fibre is dimmed. */
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 8%, rgba(0,0,0,.65) 16%, #000 24%, #000 100%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.25) 8%, rgba(0,0,0,.65) 16%, #000 24%, #000 100%); }
.isp-heroart picture{ display:block; width:100%; height:100%; }
.isp-heroart img{ width:100%; height:100%; object-fit:cover; object-position:100% 50%;
  /* Right-anchored. cover scales this file by HEIGHT here, so the whole vertical
     composition survives and only the empty left quarter is dropped: the cable
     head lands at 80% of the hero width, the fibre fan at 77%, nothing bright
     is cut. Top and bottom edges measure L 10.1 and 7.9 against the canvas's
     11.7, so these last few percent are all the fade that is needed. */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 6%, #000 94%, transparent 100%); }

/* Two lights, both measured against this photograph rather than guessed: the
   bright fibre tips occupy 27-55% x / 25-59% y of this box, the connector sits
   at 62.5% / 50.7%. The previous overlay was tuned for the old photo, its glow
   landing on empty sky (luminance 11 there), so it was removed rather than
   nudged. These breathe on 13s and 17s, offset, so they never pulse together,
   and they use screen blending: they only ADD light, never dim the cable. */
.isp-fx{ position:absolute; pointer-events:none; mix-blend-mode:screen; }
.isp-fx--fan{ left:28%; top:22%; width:36%; height:42%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(96,190,255,.13), transparent 72%);
  filter:blur(14px); animation:ispBreathe 13s ease-in-out infinite; }
.isp-fx--tip{ left:52%; top:38%; width:22%; height:26%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(120,205,255,.11), transparent 70%);
  filter:blur(10px); animation:ispBreathe 17s ease-in-out infinite -6s; }
@keyframes ispBreathe{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

/* As the viewport narrows the copy wraps onto more lines, so this box grows
   TALLER while getting narrower — and cover, which scales the file by height
   here, then eats more and more of its left side. Measured at 1366 the fade
   started at 46.4% and clipped the outermost strands (they begin at 44.8%).
   Widening the box fixes that without any visual cost: its left quarter is
   masked away regardless, so the picture still reads as starting mid-hero and
   the cable head stays glued to the same place. */
@media (max-width:1500px){ .isp-heroart{ width:64%; height:min(100%, 47vw); } }

@media (max-width:1300px){
  /* Below this the column would have to be wider than the copy to keep the
     strands intact, so the art becomes a full-width banner under the text
     instead. The box is now wider than the file's aspect, so cover switches to
     scaling by WIDTH: the whole composition is visible left to right and the
     crop moves to the vertical axis, where there is empty sky to spare.
     Measured: at 1200 the copy wraps onto enough extra lines that the hero
     grows to 894px tall, and a side-by-side column would then have to be 80%
     of the viewport to keep the strands intact. The banner is the honest
     answer below 1300 rather than an ever-wider column. */
  /* Height tracks the width (31vw) so the visible band stays a constant 55%%
     of the file at every size instead of tightening as the screen narrows.
     The fade is short — 12%% — because the band now ends mid-cable and a
     longer one would dim the ferrule. */
  .isp-heroart{ position:relative; inset:auto; transform:none;
    width:100%; height:clamp(210px, 31vw, 400px); margin-top:12px;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 88%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 0%, #000 88%, transparent 100%); }
  .isp-heroart img{ -webkit-mask-image:none; mask-image:none; object-position:50% 50%; }
  /* The two lights are positioned as percentages of the desktop box; this crop
     moves the content out from under them, so they are switched off rather
     than left glowing in the wrong place. */
  .isp-fx{ display:none; }
}

@media (prefers-reduced-motion:reduce){ .isp-fx{ display:none !important; } }
body.is-hidden .isp-fx{ animation-play-state:paused !important; }

/* why block: text left + 3 benefits right */
.isp-why{ padding:8px 0 56px; }
.isp-why__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:var(--sp-7); align-items:start;
  border:1px solid rgba(120,170,230,.14); border-radius:16px; padding:36px 32px;
  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); }
.isp-why h2{ margin:0 0 var(--sp-4); font-weight:600; font-size:clamp(1.375rem,1.15rem + 1vw,1.875rem); line-height:1.22; letter-spacing:-0.01em; color:#fff; }
.isp-why__copy p{ margin:0 0 var(--sp-4); font-size:14.5px; line-height:1.65; color:var(--text-2); }
.isp-why__copy p:last-child{ margin-bottom:0; }
.isp-why__cols{ display:grid; grid-template-columns:repeat(3,1fr); }
.isp-why__cols > div{ padding:0 22px; }
.isp-why__cols > div + div{ border-left:1px solid rgba(120,170,230,.12); }
.isp-why__cols svg{ width:26px; height:26px; color:var(--accent-cyan); margin-bottom:12px; }
.isp-why__cols h3{ margin:0 0 8px; font-weight:600; font-size:15px; color:#fff; }
.isp-why__cols p{ margin:0; font-size:13px; line-height:1.55; color:var(--text-muted); }

/* fiber link section: checks left + diagram right */
.isp-link{ padding:0 0 56px; }
.isp-link__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:var(--sp-7); align-items:center; }
.isp-link h2{ margin:0 0 var(--sp-4); font-weight:600; font-size:clamp(1.375rem,1.15rem + 1vw,1.875rem); line-height:1.22; letter-spacing:-0.01em; color:#fff; }
.isp-link__copy > p{ margin:0 0 var(--sp-5); font-size:14.5px; line-height:1.65; color:var(--text-2); }
.isp-checks{ display:grid; grid-template-columns:1fr 1fr; gap:12px 20px; margin:0; padding:0; list-style:none; }
.isp-checks li{ display:flex; align-items:flex-start; gap:9px; font-size:13.5px; line-height:1.45; color:var(--text-2); }
.isp-checks svg{ width:16px; height:16px; flex:none; margin-top:1px; color:var(--accent-cyan); }

.isp-diagram{ border:1px solid rgba(120,170,230,.14); border-radius:16px; padding:32px 26px;
  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); }
.isp-diagram__row{ display:flex; align-items:center; gap:6px; }
.isp-endpoint{ flex:0 0 118px; border:1px solid rgba(90,180,245,.35); border-radius:12px; padding:16px 10px; text-align:center; background:rgba(12,20,36,.5); }
.isp-endpoint svg{ width:26px; height:26px; margin:0 auto 8px; color:var(--accent-cyan); }
.isp-endpoint span{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--text-2); line-height:1.4; }
.isp-wire{ position:relative; flex:1 1 auto; height:2px;
  background:linear-gradient(90deg, rgba(56,182,245,.15), rgba(56,182,245,.45), rgba(56,182,245,.15)); }
.isp-wire i{ position:absolute; top:-2.5px; width:7px; height:7px; border-radius:50%; background:#7CC8FF; box-shadow:0 0 8px rgba(120,200,255,.8); }
.isp-wire i:first-child{ left:18%; } .isp-wire i:last-child{ right:18%; }
.isp-wire .sigdot{ position:absolute; top:-3.5px; left:0; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle,#EAF6FF,#38B6F5 60%,transparent 75%); box-shadow:0 0 12px 3px rgba(120,200,255,.75);
  animation:isp-sig 6s linear infinite; }
@keyframes isp-sig{ 0%{ left:0%; opacity:0;} 8%{opacity:1;} 92%{opacity:1;} 100%{ left:calc(100% - 9px); opacity:0;} }
.isp-hub{ flex:0 0 96px; text-align:center; }
.isp-hub .ring{ width:72px; height:72px; margin:0 auto 10px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(90,180,245,.45); background:rgba(46,134,240,.10); color:var(--accent-cyan);
  box-shadow:0 0 24px rgba(46,134,240,.18); }
.isp-hub .ring svg{ width:30px; height:30px; }
.isp-hub span{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-cyan); }
.isp-diagram__feats{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin:26px 0 0; padding:22px 0 0; list-style:none;
  border-top:1px solid rgba(120,170,230,.12); }
.isp-diagram__feats li{ text-align:center; font-size:11.5px; line-height:1.4; color:var(--text-muted); }
.isp-diagram__feats svg{ width:20px; height:20px; margin:0 auto 7px; color:var(--accent-cyan); }

/* solutions: 5 cards */
.isp-sol{ padding:0 0 56px; }
.isp-sol .ip-take__head{ margin-bottom:var(--sp-6); }
.isp-sol__grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:14px; }
.isp-card{ border:1px solid rgba(120,170,230,.14); border-radius:14px; padding:22px 18px;
  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; }
.isp-card:hover{ border-color:rgba(120,180,235,.34); transform:translateY(-2px); }
.isp-card svg{ width:26px; height:26px; color:var(--accent-cyan); margin-bottom:12px; }
.isp-card h3{ margin:0 0 8px; font-weight:600; font-size:15px; line-height:1.3; color:#fff; }
.isp-card p{ margin:0; font-size:12.5px; line-height:1.5; color:var(--text-muted); }

/* monitoring illustration (line-art NOC, no people) */
.isp-noc{ width:100%; max-width:420px; margin:0 0 var(--sp-5); }
.isp-list{ display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.isp-list li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.5; color:var(--text-2); }
.isp-list svg{ width:16px; height:16px; flex:none; margin-top:2px; color:var(--accent-cyan); }
.isp-who{ display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; margin:0; padding:0; list-style:none; }
.isp-who li{ display:flex; align-items:flex-start; gap:10px; font-size:13.5px; line-height:1.5; color:var(--text-2); }
.isp-who svg{ width:17px; height:17px; flex:none; margin-top:1px; color:var(--accent-cyan); }

/* ===== ip-duo balance =====
   The right panel only holds a heading and one list, so stretched against the
   left it sat 295px empty (measured at 1920). The left panel now runs its NOC
   chart and its checklist side by side instead of stacked, which halves its
   height and brings the two cards to within ~40px of each other. */
.ip-panel--mon{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:var(--sp-6); align-content:start; }
.ip-panel--mon > h2, .ip-panel--mon > h3, .ip-panel--mon > p{ grid-column:1 / -1; }
.ip-panel--mon > .isp-noc{ grid-column:1; align-self:start; margin-bottom:0; }
.ip-panel--mon > .isp-list{ grid-column:2; align-self:start; }

/* the "who" list gets a little more air so it reads as a full column */
.ip-panel--who .isp-who{ gap:26px 20px; }

@media (max-width:1080px){
  /* not enough room for two columns inside the panel — back to stacked */
  .ip-panel--mon{ display:block; }
  .ip-panel--mon > .isp-noc{ margin-bottom:var(--sp-5); }
}

/* CTA buttons row */
.isp-cta__btns{ display:flex; flex-direction:column; gap:12px; flex:none; }

@media (max-width:1080px){
  .isp-why__grid{ grid-template-columns:1fr; }
  .isp-link__grid{ grid-template-columns:1fr; }
  .isp-sol__grid{ grid-template-columns:repeat(3,1fr); }
}
@media (max-width:760px){
  .isp-why__cols{ grid-template-columns:1fr; gap:20px; }
  .isp-why__cols > div{ padding:0; }
  .isp-why__cols > div + div{ border-left:none; border-top:1px solid rgba(120,170,230,.12); padding-top:20px; }
  .isp-sol__grid{ grid-template-columns:repeat(2,1fr); }
  .isp-diagram__row{ flex-direction:column; gap:14px; }
  .isp-wire{ width:2px; height:44px; flex:none;
    background:linear-gradient(180deg, rgba(56,182,245,.15), rgba(56,182,245,.45), rgba(56,182,245,.15)); }
  .isp-wire i{ left:-2.5px !important; right:auto !important; } .isp-wire i:first-child{ top:20%; } .isp-wire i:last-child{ top:auto; bottom:20%; }
  .isp-wire .sigdot{ display:none; }
  .isp-diagram__feats{ grid-template-columns:1fr 1fr; }
  .isp-checks{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  .isp-sol__grid{ grid-template-columns:1fr; }
  .isp-who{ grid-template-columns:1fr; }
  .isp-cta__btns{ width:100%; } .isp-cta__btns .btn{ width:100%; }
}
@media (prefers-reduced-motion:reduce){ .isp-wire .sigdot{ display:none; } }
body.is-hidden .isp-wire .sigdot{ animation-play-state:paused !important; }

/* 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; }

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