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

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

/* Globe-era glow / bloom / orbital rings deleted with hero v5 —
   the elements were removed from the markup, so these matched nothing. */
@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:168px; }
.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; }
}

/* ===== REFERENCES v2 ===== */
/* ============================================================
   IT011 — References section v2  (DARK — matches approved reference)
   Deep Ink-900 bg · cyan signal · white headline w/ cyan keyword ·
   dark logo plates w/ restrained cyan borders · 4+4+2 composition.
   Real client PNGs used AS-IS, ORIGINAL COLORS (no grayscale, no recolor).
   Per-logo optical sizing hooks. Homepage signal continues, quietly.
   ============================================================ */

.refs{
  --bg:#080D18;                    /* deep dark navy / Ink-900 */
  --plate:rgba(20,34,60,.42);      /* dark display-panel surface (blends into section) */
  --plate-hover:rgba(26,44,76,.55);
  --plate-border:rgba(86,150,214,.22);
  --plate-border-hover:rgba(120,180,235,.42);
  --text:#F4F7FB; --text-2:#97A3B4; --text-muted:#6E7B8E;
  --accent:#2E86F0; --accent-cyan:#4AA8F0; --accent-soft:#3F9BE8;

  --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:120px;
  --radius:16px;
  --container:1080px; --pad:32px;
  --ease:cubic-bezier(0.16,1,0.3,1); --motion:300ms var(--ease); --motion-fast:180ms var(--ease);
  --flow:7s;
  --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;
}

*, *::before, *::after{ box-sizing:border-box; }
html, body{ max-width:100%; overflow-x:clip; }
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{ display:block; max-width:100%; }
:focus-visible{ outline:2px solid var(--accent-cyan); outline-offset:3px; border-radius:8px; }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--pad); }

/* ===================== SECTION ===================== */
.refs{ position:relative; background:var(--bg); padding-block:var(--sp-10); overflow:hidden; isolation:isolate; }
/* soft atmospheric depth behind the composition */
.refs::before{ content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(60% 42% at 50% 64%, rgba(30,64,116,.16), transparent 70%),
             radial-gradient(40% 30% at 24% 14%, rgba(24,52,96,.12), transparent 68%); }

/* Quiet cyan signal entering top-left (continuation of homepage philosophy) */
.refs__signal{ position:absolute; top:0; left:max(var(--pad), calc((100% - var(--container))/2 + var(--pad)));
  width:2px; height:96px; z-index:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(74,168,240,0) 0%, rgba(74,168,240,.45) 55%, rgba(74,168,240,.12) 100%); }
.refs__signal i{ position:absolute; left:-3px; top:0; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle,#DCEEFF,#4AA8F0 60%,transparent);
  box-shadow:0 0 12px 3px rgba(74,168,240,.6); animation:enter var(--flow) ease-in infinite; }
@keyframes enter{ 0%{ top:-10px; opacity:0;} 14%{opacity:1;} 72%{opacity:1;} 100%{ top:88px; opacity:0; } }

/* ---- Header ---- */
.refs__head{ max-width:640px; margin:0 0 var(--sp-9); }
.refs__eyebrow{ display:inline-flex; align-items:center; gap:var(--sp-3); 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); }
.refs__eyebrow::before{ content:""; width:34px; height:2px; background:var(--accent-cyan); opacity:.8; }
.refs__title{ font-weight:600; font-size:clamp(2rem,1.3rem + 2.4vw,3.25rem); line-height:1.12; letter-spacing:-0.02em;
  color:#fff; margin:0 0 var(--sp-5); }
.refs__title .hl{ color:var(--accent); }              /* cyan-blue keyword: only "infrastrukturu" */
.refs__lead{ font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem); line-height:1.65; color:var(--text-2); margin:0; max-width:38em; }

/* ===================== LOGO COMPOSITION (4 + 4 + 2) ===================== */
.refs__wall{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }

.plate{
  position:relative; display:flex; align-items:center; justify-content:center;
  min-height:160px; padding:28px 34px;                 /* roomier white card (Option 3) */
  background:#FFFFFF; border:none; border-radius:16px;
  transition:transform .3s ease, box-shadow .3s ease;
}

/* Row 3 sub-grid: centers N items at the exact column width of the 4-col track above (desktop only) */
.refs__row3{ grid-column:1/-1; display:grid; grid-template-columns:repeat(3,1fr); gap:24px; width:calc((3 * 100% - 24px) / 4); margin-inline:auto; }

/* logos: ORIGINAL colors, centered, proportionally smaller with generous air */
.plate img{ width:auto; height:auto; object-fit:contain; }

/* clickable logo plate (e.g. G Solutions -> gsolutions.group) fills the card, keeps centering */
.plate__link{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; text-decoration:none; }

/* discreet hover — lift the card 4–6px + soft blue halo, 0.3s ease (Option 3) */
.plate:hover, .plate:focus-within{ transform:translateY(-5px); box-shadow:0 12px 30px rgba(0,123,255,.12); }

/* ---- Per-logo optical sizing (balance by weight, not equal px). Aspect ratio preserved. ----
   Targets ~60–75% of the plate's usable area, whichever dimension is hit first. */
.logo--afi{ max-height:52px;  max-width:132px; }  /* PNG (no SVG source provided) */
.logo--gsolutions{ max-height:100px; max-width:150px; }  /* 621x666 canvas w/ internal whitespace -> compensated */
.logo--ids{ max-height:64px;  max-width:150px; }  /* transparent PNG, full-bleed content, 1.68 aspect */
.logo--akton{ max-height:56px;  max-width:145px; }  /* opaque white bg, 2.57 wide wordmark */
.logo--cbs{ max-height:26px;  max-width:150px; }  /* 6.58 very wide wordmark */
.logo--sap{ max-height:64px;  max-width:130px; }
.logo--stcable{ max-height:22px;  max-width:155px; }  /* opaque white bg, 10.15 extreme-wide wordmark (cropped from OG share image) */
.logo--tenderly{ max-height:36px;  max-width:145px; }  /* transparent PNG, cropped to content, 4.03 wide wordmark */
.logo--sky{ max-height:64px;  max-width:130px; }  /* opaque white bg, 1.97 aspect */
.logo--big{ max-height:74px;  max-width:140px; }  /* square tile */
.logo--extreme{ max-height:38px;  max-width:145px; }  /* opaque white bg, cropped to content, 3.86 wide wordmark */

/* ===================== SCROLL REVEAL (progressive) ===================== */
.js .reveal{ opacity:0; transform:translateY(16px); transition:opacity 560ms var(--ease), transform 560ms var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
.js .plate.reveal:nth-child(4n+2){ transition-delay:60ms; }
.js .plate.reveal:nth-child(4n+3){ transition-delay:120ms; }
.js .plate.reveal:nth-child(4n){ transition-delay:180ms; }

/* Option 3: after reveal completes, hover lift + 0.3s ease must win over reveal rules */
.js .plate.reveal.in{ transition:transform .3s ease, box-shadow .3s ease; transition-delay:0ms; }
.js .plate.reveal.in:hover, .js .plate.reveal.in:focus-within{ transform:translateY(-5px); }

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

/* ===================== RESPONSIVE ===================== */
@media (max-width:900px){
  .refs__wall{ grid-template-columns:repeat(2,1fr); gap:18px; }   /* tablet: 2 cols */
  .refs__row3{ display:contents; }                                /* reflow into 2-col grid, no special centering */
}
@media (max-width:560px){
  .refs{ --pad:20px; }
  .refs__head{ margin-bottom:var(--sp-8); }
  .refs__wall{ grid-template-columns:repeat(2,1fr); gap:16px; }
  .plate{ min-height:128px; padding:22px 20px; }
  /* logos readable on mobile, with air */
  .logo--sky{ max-height:52px; max-width:105px; } .logo--gsolutions{ max-height:80px; } .logo--ids{ max-height:48px; } .logo--big{ max-height:60px; }
  .logo--akton{ max-height:50px; max-width:135px; } .logo--sap{ max-height:52px; max-width:110px; }
  .logo--cbs{ max-height:20px; max-width:120px; } .logo--stcable{ max-height:16px; max-width:125px; } .logo--tenderly{ max-height:26px; max-width:118px; }
  .logo--afi{ max-height:42px; max-width:108px; } .logo--extreme{ max-height:28px; max-width:118px; }
}

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .refs__signal i{ display:none; }
  .js .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  .plate:hover img, .plate:focus-within img{ transform:none; }
  *{ scroll-behavior:auto !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; }
.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; } }

/* ===== SERVICES STORY (services-v1) ===== */
/* ============================================================
   IT011 — SERVICES ("Kako preuzimamo odgovornost")
   One continuous cinematic responsibility journey.
   Same world as Hero / What We Do: global dark canvas, cyan fiber, continuing Signal Pulse. Left = storytelling; right = one evolving scene.
   No frameworks. services-v1.js = IO stage + reduced-motion + pause.
   ============================================================ */
.svc{
  --bg:#070C16; --bg-2:#0A1120; --surface-dark:#16223A;
  --text:#FFFFFF; --text-2:#B7C0CF; --text-muted:#8493A8;
  --accent:#2E86F0; --accent-cyan:#38B6F5; --accent-on-dark:#5AB4F5;
  --line:rgba(120,170,230,.18); --line-2:rgba(90,180,245,.4);
  --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; --sp-10:128px;
  --container:1280px; --pad:40px;
  --ease:cubic-bezier(0.16,1,0.3,1); --motion:.7s var(--ease); --motion-fast:.2s 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;
}

svg{ display:block; } a{ color:inherit; text-decoration:none; } ul, ol{ margin:0; padding:0; list-style:none; }

/* ---------- GLOBAL CONTINUITY CANVAS (same world) ---------- */

/* ---------- SECTION ---------- */
.svc{ position:relative; background:transparent; padding-block:var(--sp-10) var(--sp-9); }
.svc__inner{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:var(--sp-8); align-items:start; }

/* left storytelling column, on the continuing fiber rail */
.svc__story{ position:relative; padding-left:58px; }
.svc__rail{ position:absolute; left:19px; top:-120px; bottom:40px; width:2px; z-index:0;
  background:linear-gradient(180deg, transparent 0, rgba(56,182,245,.30) 6%, rgba(56,182,245,.4) 50%, rgba(56,182,245,.3) 94%, rgba(56,182,245,0) 100%);
  box-shadow:0 0 14px rgba(56,182,245,.22); }
.svc__rail-signal{ position:absolute; left:-3px; top:0; width:8px; height:8px; border-radius:50%;
  background:radial-gradient(circle,#EAF6FF,#38B6F5 55%,transparent 72%); box-shadow:0 0 14px 3px rgba(120,200,255,.8);
  animation:svc-rail 9s linear infinite; }
@keyframes svc-rail{ 0%{ top:-4%; opacity:0;} 10%{opacity:1;} 88%{opacity:1;} 100%{ top:100%; opacity:0;} }

.svc__eyebrow{ font-family:var(--font-mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-cyan); margin:0 0 var(--sp-4); }
.svc__title{ font-weight:600; font-size:clamp(2rem,1.4rem + 2vw,2.9rem); line-height:1.12; letter-spacing:-0.02em; color:#fff; margin:0 0 var(--sp-5); text-wrap:balance; }
.svc__intro{ font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem); line-height:1.6; color:var(--text-2); margin:0 0 var(--sp-9); max-width:40ch; }

/* chapters */
.chapter{ position:relative; padding:var(--sp-8) 0; }
.chapter::before{ content:""; position:absolute; left:-49px; top:calc(var(--sp-8) + 20px); width:14px; height:14px; border-radius:50%;
  background:var(--bg-2); border:2px solid rgba(56,182,245,.55); box-shadow:0 0 0 5px var(--bg), 0 0 12px rgba(56,182,245,.3);
  transition:border-color var(--motion), box-shadow var(--motion), transform var(--motion); }
.chapter.is-active::before{ border-color:var(--accent-cyan); transform:scale(1.15); box-shadow:0 0 0 5px var(--bg), 0 0 18px rgba(120,200,255,.7); }
.chapter__num{ will-change:transform; font-family:var(--font-mono); font-weight:500; font-size:clamp(3rem,2rem + 3vw,4.5rem); line-height:1; letter-spacing:-0.02em;
  color:transparent; -webkit-text-stroke:1.4px rgba(90,160,235,.55); position:absolute; left:0; top:calc(var(--sp-8) - 8px); transition:-webkit-text-stroke-color var(--motion), color var(--motion), transform .25s ease; }
.chapter.is-active .chapter__num{ -webkit-text-stroke-color:rgba(90,170,245,.9); color:rgba(46,134,240,.12); }
.chapter__body{ padding-left:96px; }
.chapter__title{ font-weight:600; font-size:clamp(1.5rem,1.2rem + 1vw,2rem); line-height:1.2; letter-spacing:-0.01em; color:#fff; margin:0 0 var(--sp-3); }
.chapter__desc{ font-size:16px; line-height:1.6; color:var(--text-2); margin:0 0 var(--sp-6); max-width:38ch; }
.caps{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5) var(--sp-4); max-width:520px; }
.cap{ display:flex; flex-direction:column; gap:var(--sp-2); }
.cap svg{ width:22px; height:22px; color:var(--accent-cyan); }
.cap span{ font-size:12.5px; line-height:1.35; color:var(--text-muted); }
.chapter.is-active .cap span{ color:var(--text-2); }

/* exit block */
.svc__exit{ position:relative; margin-top:var(--sp-8); padding-top:var(--sp-7); border-top:1px solid var(--line); }
.svc__exit p{ margin:0; font-size:clamp(1.0625rem,1rem + .3vw,1.25rem); color:var(--text-2); }
.svc__exit strong{ display:block; margin-top:var(--sp-3); font-weight:600; color:var(--accent-cyan); }

/* ---------- RIGHT: one evolving cinematic stage ---------- */
.svc__stage{ position:sticky; top:0; height:100vh; display:flex; align-items:center; justify-content:center; }
.svc__stageInner{ position:relative; width:100%; max-width:600px; }
.svc__world{ width:100%; height:auto; overflow:visible; }
.svc__world .lyr{ transition:opacity var(--motion), transform var(--motion); }
.l-blueprint{ opacity:1; } .l-network, .l-host, .l-protect{ opacity:0; }
.svc__stage[data-stage="1"] .l-network, .svc__stage[data-stage="2"] .l-network, .svc__stage[data-stage="3"] .l-network{ opacity:1; }
.svc__stage[data-stage="2"] .l-host, .svc__stage[data-stage="3"] .l-host{ opacity:1; }
.svc__stage[data-stage="3"] .l-protect{ opacity:1; }
/* blueprint recedes as the real thing grows (still one scene, just matured) */
.svc__stage[data-stage="2"] .l-blueprint, .svc__stage[data-stage="3"] .l-blueprint{ opacity:.35; }
.l-protect .dome{ transform-origin:center bottom; }
.l-protect .ring{ transform-origin:center; animation:svc-rot 70s linear infinite; }
.l-protect .pulse{ transform-origin:center; animation:svc-pulse 4.5s ease-out infinite; }
@keyframes svc-rot{ to{ transform:rotate(360deg);} }
@keyframes svc-pulse{ 0%{ transform:scale(.7); opacity:0;} 16%{opacity:.5;} 70%{opacity:0;} 100%{ transform:scale(1.2); opacity:0;} }
/* snaking signal dot travelling the scene path */
.svc__world .sig{ fill:#EAF6FF; filter:drop-shadow(0 0 6px rgba(120,200,255,.95)); offset-path:path("M280 60 C 360 150, 200 240, 280 330 C 360 420, 200 520, 280 620"); offset-rotate:0deg; animation:svc-sig 11s linear infinite; }
@keyframes svc-sig{ 0%{ offset-distance:0%; opacity:0;} 6%{opacity:1;} 92%{opacity:1;} 100%{ offset-distance:100%; opacity:0;} }

/* stage label chips (BLUEPRINT / CONNECT / HOST / PROTECT) */
.svc__labels{ position:absolute; top:8%; right:-6px; display:flex; flex-direction:column; gap:var(--sp-4); }
.svc__label{ padding:12px 16px; border:1px solid var(--line); border-radius:12px; background:rgba(12,20,36,.5);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); max-width:210px; opacity:.4; transform:translateX(10px); transition:opacity var(--motion), transform var(--motion), border-color var(--motion); }
.svc__label h4{ margin:0 0 4px; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-cyan); }
.svc__label p{ margin:0; font-size:12.5px; line-height:1.45; color:var(--text-muted); }
.svc__stage[data-stage="0"] .svc__label[data-s="0"], .svc__stage[data-stage="1"] .svc__label[data-s="1"], .svc__stage[data-stage="2"] .svc__label[data-s="2"], .svc__stage[data-stage="3"] .svc__label[data-s="3"]{ opacity:1; transform:none; border-color:var(--line-2); }

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

/* ---------- RESPONSIVE ---------- */
@media (max-width:1080px){
  .svc{ --pad:28px; }
  .svc__inner{ grid-template-columns:minmax(0,1fr) minmax(0,.9fr); gap:var(--sp-6); }
  .svc__labels{ display:none; }
  .caps{ max-width:none; }
}
@media (max-width:900px){
  .svc__inner{ display:block; }
  .svc__stage{ position:sticky; top:60px; height:42vh; margin:0 auto var(--sp-8); max-width:520px; }
  .svc__story{ padding-left:52px; }
  .svc__rail{ left:16px; }
  .chapter::before{ left:-43px; }
}
@media (max-width:620px){
  .svc{ --pad:20px; }
  .svc__stage{ height:34vh; top:56px; }
  .chapter__body{ padding-left:0; }
  .chapter__num{ position:static; display:block; margin-bottom:var(--sp-2); }
  .caps{ grid-template-columns:repeat(2,1fr); }
}
@media (prefers-reduced-motion:reduce){
  .svc__stage{ position:static; height:auto; margin-bottom:var(--sp-8); }
  .svc__world .lyr{ opacity:1 !important; transition:none; }
  .svc__world .sig, .l-protect .ring, .l-protect .pulse, .svc__rail-signal{ animation:none; }
  .chapter.is-active .cap span, .cap span{ color:var(--text-2); }
  *{ scroll-behavior:auto !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; }
}

/* ===== Seamless fiber dissolve (bottom-right) — per 'referentna slika background.png'.
   The globe plate keeps its left fade on the container; the image itself now also
   dissolves vertically, so fibers melt into the dark with no cut edge/rectangle.
   Pure alpha mask -> reveals the same continuous canvas behind (identical bg). ===== */
.hero__globe img{
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 7%, #000 55%, rgba(0,0,0,.38) 80%, transparent 96%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 7%, #000 55%, rgba(0,0,0,.38) 80%, transparent 96%);
}
@media (max-width:620px){
  /* mobile container already has its own bottom fade — avoid double-fading */
  .hero__globe img{ -webkit-mask-image:none; mask-image:none; }
}

/* ============================================================
   [H5] HERO v5 — network rack photograph
   The image is pre-cropped (872x941) so the rack is already framed;
   CSS only places it and blends its left edge into the page.
   ============================================================ */
.hero__globe.hero__globe--rack{
  width:52%; opacity:1;
  /* No horizontal mask here on purpose. The photo's left 22% is near-white
     (mean luminance 217 against a canvas of 12), so revealing it at any alpha
     produced the bright vertical band if revealed at any alpha.

     The blend is a MASK, not a dark overlay. An overlay would have to paint
     opaque canvas colour over the photo's light margin, and because it is
     clipped at the hero's bottom edge it cut the fixed atmosphere layer
     (starfield included) in a straight horizontal line. A mask only removes
     the photo, so the atmosphere runs unbroken from the hero into the section
     below and there is nothing to cut. Curve is the same one that was tuned by
     measurement — alpha 0 across the light margin, then a long ramp that only
     starts where the photograph itself has gone dark. */
  -webkit-mask-image:linear-gradient(90deg,
    transparent 0%, transparent 23%,
    rgba(0,0,0,.06) 33%, rgba(0,0,0,.20) 42%, rgba(0,0,0,.48) 52%,
    rgba(0,0,0,.74) 61%, rgba(0,0,0,.91) 71%, #000 81%, #000 100%);
          mask-image:linear-gradient(90deg,
    transparent 0%, transparent 23%,
    rgba(0,0,0,.06) 33%, rgba(0,0,0,.20) 42%, rgba(0,0,0,.48) 52%,
    rgba(0,0,0,.74) 61%, rgba(0,0,0,.91) 71%, #000 81%, #000 100%);
}

/* No overlay scrim on desktop — see the mask above. */
.hero__scrim{ background:none; }
.hero__globe--rack img{
  width:100%; height:100%; object-fit:cover; transform:none;
  /* Anchored LEFT, not right. On a short wide viewport (1366x768) cover
     crops the sides, and anchoring right ate the light margin — the fade
     then landed on the rack again. Anchoring left always keeps the margin
     and sacrifices the cabinet's right edge instead, which carries nothing. */
  object-position:0% 50%;
  /* only enough top/bottom softening to kill the rectangle */
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 7%, #000 82%, transparent 100%);
          mask-image:linear-gradient(180deg, transparent 0%, #000 7%, #000 82%, transparent 100%);
}

/* ---- ambient activity: two pseudo-elements, two animations ----
   No traced paths, no per-LED markup. Just light laid over the zones
   where the photograph already glows, so the eye reads "this is live"
   without noticing an effect. */

/* A + C: fiber glow over the optical sweep, plus a soft lift over the
   switch faces where the port LEDs sit. */
.hero__globe--rack::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(40% 28% at 58% 74%, rgba(90,180,255,.60), transparent 70%),
    radial-gradient(24% 15% at 63% 31%, rgba(130,225,180,.34), transparent 72%);
  mix-blend-mode:screen; opacity:.15;
  animation:heroFiberBreathe 6.5s ease-in-out infinite;
}
@keyframes heroFiberBreathe{ 0%, 100%{ opacity:.15 } 50%{ opacity:.35 } }

/* B: one slow pulse drifting along the direction the fibers run.
   Sized in % of the plate, so the motion scales with the viewport. */
.hero__globe--rack::before{
  content:""; position:absolute; z-index:1; pointer-events:none;
  left:0; top:0; width:13%; height:15%;
  background:radial-gradient(closest-side, rgba(200,235,255,.9),
                             rgba(120,190,255,.28) 55%, transparent 78%);
  filter:blur(7px); mix-blend-mode:screen; opacity:0;
  animation:heroDataPulse 9s ease-in-out infinite;
}
@keyframes heroDataPulse{
  0%{ transform:translate(235%, 545%) scale(.85); opacity:0 }
  20%{ opacity:.46 }
  72%{ opacity:.38 }
  100%{ transform:translate(575%, 400%) scale(1.05); opacity:0 }

}
/* ---- status LEDs ----------------------------------------------
   Ten dots sitting on real green port LEDs detected in the photograph.
   Paint is a radial gradient rather than a blur filter, so there is no
   filter buffer to re-render — only opacity animates. Three behaviours,
   and every dot carries its own duration plus a negative delay, so no two
   are ever in step. */
.hero__leds{ position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; mix-blend-mode:screen; }
.hero__leds circle{ fill:url(#ledGlow); opacity:.12; }

/* a) link up — a slow, always-lit breath */
.led--breathe circle{ animation:ledBreathe 7s ease-in-out infinite; }
.led--breathe circle:nth-child(2){ animation-duration:8.4s; animation-delay:-3.1s; }
.led--breathe circle:nth-child(3){ animation-duration:6.2s; animation-delay:-5.4s; }
@keyframes ledBreathe{ 0%,100%{ opacity:.12 } 50%{ opacity:.30 } }

/* b) traffic — sits low, then two short flickers per cycle */
.led--activity circle{ opacity:.10; animation:ledActivity 9s linear infinite; }
.led--activity circle:nth-child(2){ animation-duration:11.5s; animation-delay:-4.2s; }
.led--activity circle:nth-child(3){ animation-duration:7.5s;  animation-delay:-6.1s; }
@keyframes ledActivity{
  0%,58%{ opacity:.10 }
  60%{ opacity:.34 }  62%{ opacity:.11 }
  67%{ opacity:.28 }  69%,100%{ opacity:.10 }
}

/* c) powered — near constant, drifting a little */
.led--steady circle{ opacity:.20; animation:ledSteady 13s ease-in-out infinite; }
.led--steady circle:nth-child(2){ animation-duration:15.5s; animation-delay:-6.3s; }
.led--steady circle:nth-child(3){ animation-duration:11s;   animation-delay:-2.7s; }
.led--steady circle:nth-child(4){ animation-duration:17s;   animation-delay:-9.8s; }
@keyframes ledSteady{ 0%,100%{ opacity:.20 } 38%{ opacity:.26 } 72%{ opacity:.17 } }


/* ---- responsive ----
   Above 900px the plate sits beside the copy. Below it there is no room
   for both, so the plate becomes a band above the copy — the copy column
   runs to ~87% of the viewport at 768px, and anything behind the text
   costs contrast. The band still shows the rack, just framed tighter. */
@media (max-width:1200px){
  .hero__globe.hero__globe--rack{ width:56%; }
}
@media (max-width:900px){
  /* The stacked layout has no dark-to-photo meeting point to blend, and the
     old vertical scrim ended at .96 alpha on the hero's bottom edge — the same
     straight cut across the atmosphere. Nothing to replace it with: the band's
     own mask already fades the photo out well above the copy. */
  .hero__scrim{ background:none; }
  .hero__globe.hero__globe--rack{
    top:0; bottom:auto; left:0; right:0; width:100%; height:19%;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%);
            mask-image:linear-gradient(180deg, #000 0%, #000 62%, transparent 100%); }
  .hero__globe--rack img{ object-position:50% 26%;
    -webkit-mask-image:none; mask-image:none; }
  /* the overlays are placed for the tall crop; they would land nowhere
     sensible on a wide band */
  .hero__globe--rack::before, .hero__globe--rack::after{ display:none; }
}
@media (max-width:620px){
  /* headline, lead and CTA come first — the band is fully gone before
     the eyebrow starts, so no type has anything behind it */
  .hero__globe.hero__globe--rack{ height:26%;
    -webkit-mask-image:linear-gradient(180deg, #000 0%, #000 56%, transparent 82%);
            mask-image:linear-gradient(180deg, #000 0%, #000 56%, transparent 82%); }
  .hero__globe--rack img{ object-position:64% 30%; }
}

@media (prefers-reduced-motion:reduce){
  .hero__globe--rack::after{ animation:none; opacity:.22; }
  .hero__globe--rack::before{ display:none; }
  /* LEDs stay lit — they just stop flickering */
  .hero__leds circle{ animation:none !important; opacity:.18; }
}

/* Entity recenica ispod hero-a — prati tipografiju .svc__intro, manji razmak
   ispod jer joj postojeci uvod neposredno sledi. */
.svc__lede{ font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem); line-height:1.6;
  color:var(--text-2); margin:0 0 var(--sp-4); max-width:40ch; }

/* ==========================================================================
   STUBOVI KAO LINKOVI
   Naslov stuba vodi na odgovarajucu servisnu stranicu. Afordansa je namerno
   minimalna: pokazivac misa (automatski uz <a>), globalno ::focus-visible
   pravilo koje sajt vec ima, i mali horizontalni pomeraj POSTOJECEG
   dekorativnog broja. Nema nove boje, podvlacenja ni nove komponente.
   :has() ovde degradira bezbedno — bez njega link i dalje radi.
   ========================================================================== */
.chapter__title a{ color:inherit; text-decoration:none; }
.chapter:has(.chapter__title a:hover) .chapter__num{ transform:translateX(6px); }

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