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

/* ===== SERVICES PAGE ("Usluge") ===== */
/* 6-node hero layout (3 per side) */
.ab-node--n-network{ left:2%; top:6%; }  .ab-node--n-security{ left:0%; top:38%; }  .ab-node--n-backup{ left:2%; top:70%; }
.ab-node--n-cloud{ right:2%; top:8%; }   .ab-node--n-dc{ right:0%; top:40%; }       .ab-node--n-users{ right:2%; top:72%; }
.ab-lines .sig--l{ offset-path:path("M96 48 H150 V190 H196"); }
.ab-lines .sig--r{ offset-path:path("M464 56 H410 V210 H372"); }

/* service cards */
.sv-cards{ padding:8px 0 56px; }
.sv-card{ display:grid; grid-template-columns:84px minmax(0,1fr) auto minmax(0,320px); align-items:center; gap:26px;
  border:1px solid rgba(120,170,230,.16); border-radius:18px; padding:26px 30px;
  background:linear-gradient(180deg, rgba(18,28,48,.50) 0%, rgba(10,17,32,.62) 100%);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:0 16px 44px rgba(0,0,0,.30);
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.sv-card + .sv-card{ margin-top:18px; }
.sv-card:hover, .sv-card:focus-within{ border-color:rgba(120,180,235,.38); transform:translateY(-2px);
  box-shadow:0 20px 54px rgba(0,0,0,.36), 0 0 60px rgba(46,134,240,.10); }
.sv-card__icon{ width:72px; height:72px; border-radius:50%; display:grid; place-items:center;
  border:1px solid rgba(90,180,245,.4); background:rgba(46,134,240,.08); color:var(--accent-cyan); }
.sv-card__icon svg{ width:30px; height:30px; }
.sv-card__title{ margin:0 0 8px; font-weight:600; font-size:clamp(1.25rem,1.1rem + .6vw,1.5rem); letter-spacing:-0.01em; color:#fff; }
.sv-card__text{ margin:0; font-size:14.5px; line-height:1.6; color:var(--text-2); max-width:54ch; }
.sv-card__arrow{ color:var(--accent-cyan); transition:transform .25s ease; }
.sv-card__arrow svg{ width:22px; height:22px; }
.sv-card:hover .sv-card__arrow{ transform:translateX(4px); }
.sv-card__art{ justify-self:end; width:100%; max-width:320px; opacity:.9; }
.sv-card__art svg{ width:100%; height:auto; }
.sv-card__art path, .sv-card__art rect, .sv-card__art circle, .sv-card__art ellipse{ vector-effect:non-scaling-stroke; }

@media (max-width:1080px){ .sv-card{ grid-template-columns:72px minmax(0,1fr) auto minmax(0,240px); gap:20px; } }
@media (max-width:900px){
  .sv-card{ grid-template-columns:64px minmax(0,1fr) auto; }
  .sv-card__art{ display:none; }
  .sv-card__icon{ width:60px; height:60px; } .sv-card__icon svg{ width:26px; height:26px; }
}
@media (max-width:640px){
  .sv-card{ grid-template-columns:52px minmax(0,1fr); padding:22px 20px; gap:16px; }
  .sv-card__arrow{ display:none; }
  .sv-card__icon{ width:48px; height:48px; } .sv-card__icon svg{ width:22px; height:22px; }
}

/* ============================================================
   PRODAJA — LIGHT THEME (pilot page)
   Everything below overrides the shared dark system for THIS PAGE
   ONLY. Typography, spacing, grid, buttons and footer stay the
   site's; only the canvas flips from Ink to paper.
   ============================================================ */
:root{
  /* Re-pointed at the site's own dark tokens instead of a second palette.
     Every rule below reads through these, so the page inherits the same Ink
     canvas, panel recipe and accents as ISP / Infrastruktura. */
  --pl-bg:var(--bg);                     /* #070C16 */
  --pl-surface:linear-gradient(180deg, rgba(18,28,48,.55) 0%, rgba(10,17,32,.68) 100%);
  --pl-ink:var(--text);                  /* #FFFFFF */
  --pl-text:var(--text-2);               /* #B7C0CF */
  --pl-muted:var(--text-muted);          /* #8493A8 */
  --pl-accent:var(--accent-cyan);        /* #38B6F5 */
  --pl-line:rgba(120,170,230,.14);       /* the site's panel border */
  --pl-line-2:rgba(120,170,230,.24);
}

html{ background:var(--bg); }
body.pl{ background:var(--pl-bg); color:var(--pl-text); }
body.pl main{ position:relative; z-index:1; }
body.pl :focus-visible{ outline:2px solid var(--pl-accent) !important; outline-offset:3px; }

/* --- paper canvas: faint engineering grid + soft wash --- */
.pl-canvas{ position:fixed; inset:0; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, #070C16 0%, #081020 45%, #060910 100%); }
.pl-canvas__grid{ 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 60% 20%, #000 24%, transparent 74%);
          mask-image:radial-gradient(120% 100% at 60% 20%, #000 24%, transparent 74%); }
.pl-canvas__wash{ position:absolute; inset:0;
  background:radial-gradient(70% 55% at 78% 10%, rgba(46,134,240,.16), transparent 62%),
             radial-gradient(60% 50% at 8% 92%, rgba(20,70,130,.15), transparent 64%); }

/* --- header on paper --- */
body.pl .site-header{ position:fixed; top:0; left:0; right:0; z-index:60; padding-block:12px; background:transparent; }
/* geometry only — colour comes from the shared .nav-shell */
body.pl .site-header .nav-shell{ min-height:66px; border-radius:18px; }
body.pl .site-header .nav-shell::before{ content:none; }
body.pl .site-header.is-scrolled{ padding-block:6px; }
body.pl .site-header.is-scrolled .nav-shell{ min-height:58px; }
/* logo keeps the site-wide 76px — it is what sets the nav bar height, so
   shrinking it here made this page's header 20px shorter than every other page.
   Only the blue drop-shadow is dropped (it is meant for the Ink canvas). */
body.pl .primary-nav > ul > li > a{ color:var(--pl-ink); }
body.pl .primary-nav > ul > li > a::after{ background:var(--pl-accent); }
body.pl .primary-nav > ul > li > a.is-current{ color:var(--pl-accent); }
body.pl .primary-nav > ul > li > a.is-current::after{ transform:scaleX(1); }

/* --- buttons on paper --- */

/* ===================== HERO ===================== */
/* bottom padding must clear the photo's -8% overhang — that space used to be
   absorbed by the spec strip that sat here */
.pl-hero{ position:relative; padding:150px 0 clamp(72px, 6vw, 120px); }

/* vertical spine label on the left edge */
.pl-hero__rail{ position:absolute; left:20px; top:210px; z-index:1;
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--pl-muted); white-space:nowrap; padding-block:22px; }
.pl-hero__rail::before, .pl-hero__rail::after{ content:""; position:absolute; left:50%; width:1px; height:56px; background:var(--pl-line-2); }
.pl-hero__rail::before{ top:-58px; } .pl-hero__rail::after{ bottom:-58px; }

/* The hero runs wider than the site container so the equipment has room, but the
   copy column still starts exactly where the nav content starts (no misalignment). */
.pl-hero__grid{ display:grid; max-width:100%;
  padding-left:max(var(--pad), calc((100% - var(--container)) / 2 + var(--pad)));
  padding-right:clamp(28px, 3vw, 72px);
  grid-template-columns:minmax(300px,.52fr) minmax(0,1fr) auto;
  gap:var(--sp-6) var(--sp-7); align-items:end; }
/* below ~1600 the viewport is barely wider than the site container, so the only
   room left for the equipment comes from tighter gutters */
@media (max-width:1600px){
  .pl-hero__grid{ column-gap:var(--sp-6); padding-right:28px; }
  .pl-index{ gap:var(--sp-5); }
  .pl-index__num{ font-size:30px; }
}
.pl-hero__copy{ padding-bottom:6px; }

.pl-eyebrow{ font-family:var(--font-mono); font-weight:500; font-size:12.5px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--pl-accent); margin:0 0 var(--sp-5); }
.pl-title{ font-weight:700; font-size:clamp(2.25rem,1.4rem + 3.1vw,4rem); line-height:1.06; letter-spacing:-0.03em;
  color:var(--pl-ink); margin:0; text-wrap:balance; }
.pl-title .hl{ color:var(--pl-accent); }
.pl-rule{ display:block; width:56px; height:3px; border-radius:2px; background:var(--pl-accent); margin:var(--sp-5) 0 var(--sp-5); }
.pl-lead{ margin:0 0 var(--sp-6); font-size:clamp(1rem,.95rem + .3vw,1.1875rem); line-height:1.6; color:var(--pl-text); max-width:34ch; }

.pl-chips{ display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-6); margin:0 0 var(--sp-6); padding:0; list-style:none; }
.pl-chips li{ display:inline-flex; align-items:center; gap:10px; font-size:14.5px; font-weight:500; color:var(--pl-ink); }
.pl-chips svg{ width:22px; height:22px; flex:none; color:var(--pl-accent); }

/* hero CTA row — sits directly under the category chips, no card around it */
.pl-hero__cta{ display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
body.pl .pl-hero__cta .btn{ min-height:58px; padding:0 30px; border-radius:11px; font-size:15.5px;
  transition:transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease, border-color 200ms ease; }
/* only the lift stays local; fill, border and hover come from the shared
   .btn--primary / .btn--ghost so these match every other page */
body.pl .pl-hero__cta .btn--primary:hover{ transform:translateY(-2px); }
body.pl .pl-hero__cta .btn--ghost:hover{ transform:translateY(-2px); }
body.pl .pl-hero__cta .btn:active{ transform:translateY(0); }

/* product photography — transparent PNG straight on the paper canvas.
   No card, no frame, no gradient, no glow: the asset carries its own shading.
   Three layers: position (layout) → reveal (entrance) → image (idle bounce), so an animated transform can never cancel the positioning. */
/* The PNG carries ~12% empty canvas below the equipment, so bottom-aligning the
   file leaves the equipment floating above the copy baseline. This pulls it back
   down by that ratio (scales with the image) — an optical correction, not the
   positioning itself, which the grid handles. */
/* The supplied cut-out is trimmed to its content, so the -8% optical pull
   that compensated the old file's empty bottom margin is no longer needed. */
.pl-hero__photo{ justify-self:center; align-self:end; min-width:0; width:100%; }
.hero-equipment-reveal{ display:block; }
.hero-equipment-image{ display:block; margin-inline:auto;
  width:100%; max-width:clamp(760px, 54vw, 1040px); height:auto; object-fit:contain;
  filter:drop-shadow(0 0 40px rgba(70,150,235,.20))
         drop-shadow(0 16px 34px rgba(0,0,0,.50)); }

/* entrance: fade + rise with a small overshoot (~820ms) */
@keyframes plEquipIn{
  0%{ opacity:0; transform:translateY(22px); }
  70%{ opacity:1; transform:translateY(-4px); }
  100%{ opacity:1; transform:translateY(0); }
}
/* idle: at rest most of the cycle, one soft 5px lift every ~5.6s, tiny 2px settle */
@keyframes plEquipBounce{
  0%, 80%{ transform:translateY(0); }
  87%{ transform:translateY(-5px); }
  93%{ transform:translateY(2px); }
  100%{ transform:translateY(0); }
}
.js .hero-equipment-reveal{ opacity:0; animation:plEquipIn 820ms cubic-bezier(.22,1,.36,1) 100ms both; }
.hero-equipment-image{ animation:plEquipBounce 5.6s ease-in-out 1.4s infinite; }
/* only the looping idle bounce pauses on a hidden tab — the one-shot entrance
   must never be left parked at opacity 0 */
body.is-hidden .hero-equipment-image{ animation-play-state:paused !important; }

/* right index rail 01 / 02 / 03 */
.pl-index{ display:flex; flex-direction:column; gap:var(--sp-6); text-align:right; flex:none; align-self:center; }
.pl-index a{ display:block; padding-bottom:var(--sp-4); border-bottom:1px solid var(--pl-line);
  transition:color var(--motion-fast); }
.pl-index a:last-child{ border-bottom:none; }
.pl-index__num{ display:block; font-weight:700; font-size:34px; line-height:1; letter-spacing:-0.02em; color:var(--pl-muted);
  transition:color var(--motion-fast); }
.pl-index a:first-child .pl-index__num{ color:var(--pl-accent); }
.pl-index__label{ display:block; margin-top:8px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--pl-muted); }
.pl-index a:hover .pl-index__num, .pl-index a:focus-visible .pl-index__num{ color:var(--pl-accent); }
.pl-index a:hover .pl-index__label, .pl-index a:focus-visible .pl-index__label{ color:var(--pl-ink); }

/* Section depth: the brands strip and the closing CTA sit on a slightly
   lifted panel, the category cards on the standard one, so the page keeps
   layers instead of reading as a single flat sheet. */
.pl-brands .pl-logos{
  background:linear-gradient(180deg, rgba(24,36,60,.62) 0%, rgba(12,20,38,.72) 100%); }
.pl-cta{ background:linear-gradient(180deg, rgba(24,36,60,.62) 0%, rgba(12,20,38,.72) 100%); }

/* ===================== SHARED SECTIONS ===================== */
.pl-section{ padding:0 0 var(--sp-8); }
.pl-head{ display:flex; align-items:center; gap:18px; margin:0 0 var(--sp-6); }
.pl-head::after{ content:""; flex:1; height:1px; background:var(--pl-line-2); }
.pl-head h2{ margin:0; font-family:var(--font-mono); font-weight:500; font-size:12.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--pl-accent); white-space:nowrap; }
.pl-section__lead{ margin:0 0 var(--sp-7); max-width:62ch; font-size:clamp(1rem,.95rem + .2vw,1.0625rem);
  line-height:1.65; color:var(--pl-text); }

/* benefit grid */
.pl-why{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-6) var(--sp-7); }
.pl-why .ring{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:rgba(46,134,240,.10); border:1px solid rgba(90,180,245,.22); color:var(--pl-accent); margin-bottom:14px; }
.pl-why .ring svg{ width:24px; height:24px; }
.pl-why h3{ margin:0 0 8px; font-weight:600; font-size:16px; color:var(--pl-ink); letter-spacing:-0.01em; }
.pl-why p{ margin:0; font-size:14px; line-height:1.6; color:var(--pl-text); }

/* category cards */
.pl-card{ display:grid; grid-template-columns:auto auto minmax(0,1fr) minmax(0,1.33fr);
  align-items:start; gap:var(--sp-5) var(--sp-6);
  background:var(--pl-surface); border:1px solid var(--pl-line); border-radius:20px;
  padding:32px 34px;
  transition:border-color var(--motion), box-shadow var(--motion), transform var(--motion);
  scroll-margin-top:110px; }
.pl-card + .pl-card{ margin-top:16px; }
.pl-card:hover{ border-color:rgba(90,180,245,.34);
  box-shadow:0 14px 34px rgba(0,0,0,.34), 0 0 0 1px rgba(90,180,245,.10);
  transform:translateY(-2px); }
.pl-card__num{ font-family:var(--font-mono); font-size:12.5px; letter-spacing:.16em; color:var(--pl-accent); padding-top:6px; }
.pl-card__icon{ width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:rgba(46,134,240,.10); border:1px solid rgba(90,180,245,.22); color:var(--pl-accent); }
.pl-card__icon svg{ width:24px; height:24px; }
.pl-card__body h3{ margin:0 0 10px; font-weight:600; font-size:20px; color:var(--pl-ink); letter-spacing:-0.015em; }
.pl-card__body p{ margin:0 0 16px; font-size:14.5px; line-height:1.6; color:var(--pl-text); max-width:62ch; }
.pl-card__tags{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.pl-card__tags li{ padding:6px 12px; border-radius:8px; background:rgba(120,170,230,.07);
  border:1px solid var(--pl-line); font-size:12.5px; font-weight:500; color:var(--pl-text); }

/* equipment photo — transparent PNG sitting straight on the card, no frame or
   plate of its own; the grid column keeps it clear of the copy and the chips */
.pl-card__photo{ align-self:center; justify-self:end; display:block;
  width:100%; height:auto; object-fit:contain;
  /* the equipment is dark hardware on transparent (measured 60-82% of visible
     pixels below luminance 80). Rather than lightening the product, a soft
     halo is thrown behind it so the silhouette keeps its edge on Ink. */
  filter:drop-shadow(0 0 26px rgba(70,150,235,.22))
         drop-shadow(0 10px 22px rgba(0,0,0,.45)); }

/* entrance rides the site's existing .reveal observer — just a different
   direction and a beat's delay so it follows the card rather than racing it */
.js .pl-card__photo.reveal{ transform:translateX(26px);
  transition-duration:620ms; transition-delay:120ms; }
.js .pl-card__photo.reveal.in{ transform:none; }

/* process */
.pl-flow{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-5); margin:0; padding:0; list-style:none;
  counter-reset:step; }
.pl-flow li{ position:relative; padding-top:var(--sp-5); border-top:2px solid var(--pl-line-2); }
.pl-flow li:first-child{ border-top-color:var(--pl-accent); }
.pl-flow__num{ display:block; font-family:var(--font-mono); font-size:12px; letter-spacing:.16em;
  color:var(--pl-accent); margin-bottom:10px; }
.pl-flow h3{ margin:0 0 8px; font-weight:600; font-size:15.5px; color:var(--pl-ink); letter-spacing:-0.01em; }
.pl-flow p{ margin:0; font-size:13.5px; line-height:1.55; color:var(--pl-text); }

/* manufacturers */
/* One row, evenly distributed. Items may shrink (flex:0 1 auto + max-width:100%)
   so the line holds together as the container narrows, instead of wrapping. */
.pl-logos{ display:flex; flex-wrap:nowrap; align-items:stretch; justify-content:space-between;
  --pl-gap:clamp(10px, 1.9vw, 34px);
  gap:var(--pl-gap);
  margin:0; padding:30px 34px; list-style:none;
  background:var(--pl-surface); border:1px solid var(--pl-line); border-radius:20px; }
.pl-logos li{ flex:0 1 auto; min-width:0; display:flex; align-items:center; justify-content:center; }
.pl-logos img{ --tl-shift:0%; max-width:100%; width:auto; height:auto; object-fit:contain; display:block;
  transform:translateY(var(--tl-shift));
  /* Brand colours, straight from the source files — no grayscale, no opacity
     wash. Measured saturation of the assets: Lenovo 230, Cisco 214,
     CrowdStrike 206, Dell 201, Veeam 175, M365 110, Ubiquiti 44, Fortinet 29. */
  transition:transform .25s ease, filter .25s ease; }

/* Optical centring: a few files place their mark off-centre in their own canvas, so centring the BOX still leaves the logo sitting low. Shift is a % of the
   element's own height, so it scales with the per-logo max-height above. */
.pl-logos .tl--lenovo{ --tl-shift:-11.4%; }  /* 280px empty above vs 136px below */
.pl-logos .tl--m365{ --tl-shift:-3.5%; }
.pl-logos .tl--veeam{ --tl-shift:-1.5%; }

/* Per-logo optical sizing. Each file wraps its mark in a different amount of
   empty canvas, so max-height is set as (target visible height ÷ that fill
   ratio) — the point is equal VISIBLE weight, not equal box height. */
.pl-logos .tl--m365{ max-height:35px; }  /* square icon, 92% fill  */
.pl-logos .tl--lenovo{ max-height:71px; }  /* 66% of the file is empty canvas */
.pl-logos .tl--dell{ max-height:32px; }  /* round badge, fills its height */
.pl-logos .tl--fortinet{ max-height:20px; }  /* 8.7:1 — widest mark    */
.pl-logos .tl--crowdstrike{ max-height:37px; }
.pl-logos .tl--synology{ max-height:29px; }
.pl-logos .tl--cisco{ max-height:32px; }
.pl-logos .tl--ubiquiti{ max-height:31px; }
.pl-logos .tl--vmware{ max-height:19px; }  /* 6.6:1 */
.pl-logos .tl--veeam{ max-height:32px; }
/* These are the vendors' positive (light-background) assets, so several carry
   dark elements that vanish on Ink. Measured contrast of each mark's darkest
   part against the panel: Synology 1.02, Fortinet 1.06, M365 1.11,
   Ubiquiti 1.13, VMware 1.25 — five of ten effectively invisible.

   Rather than filtering the colour out of them, each logo gets a light plate
   to sit on. Every brand colour stays exactly as the source file has it, and
   no filter is applied anywhere. The plate is a pseudo-element so it adds no
   box of its own — spacing, sizes and the panel height are untouched.
   If the vendors' reversed (knockout) assets are ever added, this rule and
   the plates can simply go. */
.pl-logos li{ position:relative; }
.pl-logos li::before{
  content:""; position:absolute; z-index:0;
  /* The plate breathes out past the logo, but never further than the row's own
     gap allows — at 1100px the gap is only 20.9px, so a fixed 13px on each side
     made neighbouring plates overlap. Tied to the gap it always leaves a 6px
     channel between plates, and tops out at the 13px that reads best wide. */
  left:calc(0px - min(13px, (var(--pl-gap) - 6px) / 2));
  right:calc(0px - min(13px, (var(--pl-gap) - 6px) / 2));
  /* One height for every plate, and it follows the row instead of the logo.
     Per-logo max-heights run 19-71px (tuned for equal VISIBLE weight), so a
     box-relative plate came out wildly uneven; a fixed px one stopped matching
     once the flex row narrowed and the logos scaled down with it. The list is
     stretched instead, so each item is the row height and 74% of that tracks
     the logos at every width. Measured: every mark sits within +-16.2px of its
     box centre, well inside this plate. */
  top:50%; transform:translateY(-50%); height:74%;
  border-radius:8px; background:rgba(255,255,255,.92); }
.pl-logos img{ position:relative; z-index:1; }

/* hover: colour stays, it just lifts and gains a little saturation */
.pl-logos li:hover img, .pl-logos li:focus-within img{
  transform:translateY(calc(var(--tl-shift) - 4px));
  filter:saturate(1.15) brightness(1.08); }
.pl-logos li:hover .tl--vmware, .pl-logos li:focus-within .tl--vmware{
  filter:invert(1) brightness(1.08); }
.pl-brands__note{ margin:22px 0 0; text-align:center; font-size:13.5px; color:var(--pl-muted); }

/* closing CTA */
.pl-cta-wrap{ padding-bottom:var(--sp-9); }
.pl-cta{ display:flex; align-items:center; justify-content:space-between; gap:var(--sp-6);
  background:var(--pl-surface); border:1px solid var(--pl-line); border-radius:20px; padding:32px 36px; }
.pl-cta h2{ margin:0 0 8px; font-weight:600; font-size:clamp(1.25rem,1.1rem + .8vw,1.625rem);
  color:var(--pl-ink); letter-spacing:-0.015em; }
.pl-cta p{ margin:0; font-size:14.5px; line-height:1.6; color:var(--pl-text); max-width:60ch; }
.pl-cta .btn{ flex:none; }

/* footer keeps the site's dark shell — it closes the light page.
   The shared shell is semi-transparent (built for the Ink canvas); over
   paper it would wash out to grey, so it is made opaque here. */
body.pl .site-footer{ padding-top:var(--sp-6); }
/* footer uses the shared dark shell — no local override needed */
body.pl .footer-shell::before{ opacity:.7; }

/* ===================== RESPONSIVE ===================== */
@media (max-width:1180px){
  .pl-hero__rail{ display:none; }
  .pl-hero__grid{ grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); }
  .pl-index{ grid-column:1 / -1; flex-direction:row; justify-content:flex-start; text-align:left; gap:var(--sp-7); }
  .pl-index a{ border-bottom:none; padding-bottom:0; padding-top:var(--sp-4); border-top:1px solid var(--pl-line); flex:1 1 0; }
  .pl-index a:first-child{ border-top-color:var(--pl-accent); }
  /* tablet: stay horizontal, just give the copy a little more of the card */
  .pl-card{ grid-template-columns:auto auto minmax(0,1fr) minmax(0,.95fr); }
  .pl-why{ grid-template-columns:repeat(2,1fr); }
  .pl-flow{ grid-template-columns:repeat(3,1fr); gap:var(--sp-6) var(--sp-5); }
}
@media (max-width:900px){
  .pl-hero{ padding-top:120px; }
  .pl-hero__grid{ grid-template-columns:1fr; gap:var(--sp-6); padding-right:var(--pad); }
  .pl-lead{ max-width:none; }
  /* photo drops below the copy + CTA; no desktop offsets, plain flow */
  .pl-hero__photo{ order:3; justify-self:center; align-self:auto; margin-bottom:0; }
  .hero-equipment-image{ max-width:100%; }
  .pl-index{ order:4; }
  .pl-card{ grid-template-columns:auto minmax(0,1fr); }
  .pl-card__num{ grid-column:1 / -1; padding-top:0; }
  /* stack: copy first, equipment centred on its own row underneath */
  .pl-card__photo{ grid-column:1 / -1; justify-self:center; max-width:520px; margin-top:var(--sp-2); }
  .js .pl-card__photo.reveal{ transform:translateY(20px); }
}
@media (max-width:640px){
  .pl-why{ grid-template-columns:1fr; }
  .pl-flow{ grid-template-columns:1fr; gap:var(--sp-5); }
  .pl-index{ flex-wrap:wrap; gap:var(--sp-5); }
  .pl-index a{ flex:1 1 40%; }
  .pl-card{ padding:26px 22px; }
  .pl-card__body h3{ font-size:18px; }
  /* phones: one row would be unreadable — let it wrap, centred, at ~72% scale */
  .pl-logos{ flex-wrap:wrap; padding:24px 20px; --pl-gap:26px; gap:22px var(--pl-gap); justify-content:center; }
  .pl-logos li{ flex:0 0 auto; }
  /* the row wraps here, so each line has its own height and a %-based plate
     would come out different per line — the sizes are fixed below anyway */
  .pl-logos li::before{ height:36px; }
  .pl-logos .tl--m365{ max-height:26px; }        .pl-logos .tl--lenovo{ max-height:52px; }
  .pl-logos .tl--dell{ max-height:24px; }        .pl-logos .tl--fortinet{ max-height:15px; }
  .pl-logos .tl--crowdstrike{ max-height:27px; } .pl-logos .tl--synology{ max-height:21px; }
  .pl-logos .tl--cisco{ max-height:24px; }       .pl-logos .tl--ubiquiti{ max-height:23px; }
  .pl-logos .tl--vmware{ max-height:14px; }      .pl-logos .tl--veeam{ max-height:24px; }
  .pl-cta{ flex-direction:column; align-items:flex-start; padding:28px 22px; }
  .pl-cta .btn{ width:100%; }
  /* hero buttons stack full-width — still no card around them */
  .pl-hero__cta{ flex-direction:column; align-items:stretch; width:100%; gap:12px; }
  body.pl .pl-hero__cta .btn{ width:100%; }
  /* the idle bounce adds nothing on a phone — switch it off */
  .hero-equipment-image{ animation:none; }
  .pl-cta-wrap{ padding-bottom:var(--sp-8); }
}
@media (prefers-reduced-motion:reduce){
  .pl-card:hover{ transform:none; }
  /* drop the lift but keep the optical centring */
  .pl-logos li:hover img{ transform:translateY(var(--tl-shift)); }
  /* equipment entrance + idle bounce fully off */
  .js .hero-equipment-reveal{ opacity:1; animation:none; transform:none; }
  .hero-equipment-image{ animation:none; transform:none; }
  body.pl .pl-hero__cta .btn:hover{ transform:none; }
}

/* off-canvas mobile menu — the shared panel is dark (built for the Ink
   canvas); on paper it must flip too, otherwise navy links sit on near-black */
@media (max-width:900px){
  /* the off-canvas panel is the shared dark one again — no light override */
}

/* ==========================================================================
   FAQ — komponente preuzete iz it-podrska.css (.ip-take, .ip-why).
   Bez novih komponenti: isti obrazac kao FAQ na IT podrsci i ISP-u.
   ========================================================================== */
/* ===== IT PODRŠKA PAGE ===== */
/* 8 equal cards */
.ip-take{ padding:8px 0 56px; }
.ip-take__head{ display:flex; align-items:center; gap:18px; margin:0 0 var(--sp-6); }
.ip-take__head::before, .ip-take__head::after{ content:""; flex:1; height:1px; background:rgba(120,170,230,.16); }
.ip-take__head h2{ margin:0; font-family:var(--font-mono); font-weight:500; font-size:13px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent-cyan); white-space:nowrap; }
/* 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); }
@media (max-width:560px){
  .ip-why{ grid-template-columns:1fr; }
}
/* FAQ — koristi postojecu .ip-why mrezu; dodaje se samo boja linka */
.ip-faq a{ color:var(--accent-cyan); }

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