/* ==========================================================================
   Securinex — securinex.com
   Palette and type taken from the Corporate Brochure 2026.
   ========================================================================== */

:root{
  /* brand */
  --navy:      #15233c;
  --navy-deep: #0e1d32;
  --navy-800:  #12243b;
  --gold:      #c6a054;
  --gold-lt:   #d9bd7a;

  /* neutrals */
  --ink:       #15233c;
  --body:      #4d5872;
  --body-2:    #565f77;
  --lede:      #414d67;
  --mute:      #93a4bd;
  --mute-lt:   #a9b8cd;
  --on-dark:   #cfdaea;
  --paper:     #ffffff;
  --paper-2:   #f5f7fa;
  --rule:      #e4e8ef;

  --wrap: 1180px;
  --gut: 28px;
  --r: 10px;
  --t: .22s cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; scroll-padding-top:90px; }

body{
  margin:0;
  font-family:Poppins,"Helvetica Neue",Arial,sans-serif;
  font-size:1rem;
  line-height:1.65;
  color:var(--body);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }

.wrap{ width:min(var(--wrap),100% - var(--gut)*2); margin-inline:auto; }

/* ---------- type ---------------------------------------------------------- */
h1,h2,h3,h4{ margin:0; color:var(--ink); font-weight:700; line-height:1.14;
             letter-spacing:-.015em; }
h1{ font-size:clamp(2.3rem,min(5.2vw,7.2vh),3.85rem); }
h2{ font-size:clamp(1.75rem,min(3.4vw,5vh),2.7rem); }
h3{ font-size:1.16rem; font-weight:600; letter-spacing:-.005em; }
p{ margin:0 0 1.05em; }
p:last-child{ margin-bottom:0; }

.eyebrow{
  display:block; margin:0 0 16px;
  font-size:.72rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold);
}
.eyebrow.on-dark{ color:var(--gold); }
.gold{ color:var(--gold); }
.gold-lt{ color:var(--gold-lt); }

.lede{ font-size:1.09rem; line-height:1.72; color:var(--lede); max-width:62ch; }
.rule{ width:64px; height:2px; background:var(--gold); border:0; margin:22px 0 0; }

/* ---------- buttons ------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; gap:.6em;
  padding:14px 28px; border-radius:6px; border:1.5px solid transparent;
  font-size:.86rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  text-decoration:none; cursor:pointer; transition:var(--t);
}
.btn-gold{ background:var(--gold); color:#14203a; }
.btn-gold:hover{ background:var(--gold-lt); transform:translateY(-1px); }
.btn-ghost{ border-color:rgba(198,160,84,.55); color:var(--gold-lt); }
.btn-ghost:hover{ border-color:var(--gold); background:rgba(198,160,84,.1); }
.btn-ink{ border-color:#d3d9e3; color:var(--ink); }
.btn-ink:hover{ border-color:var(--gold); color:var(--gold); }

/* ---------- header -------------------------------------------------------- */
.hdr{
  position:sticky; top:0; z-index:60;
  background:rgba(14,29,50,.86); backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.07);
  transition:background var(--t), box-shadow var(--t), border-color var(--t);
}
.hdr.scrolled{
  background:rgba(11,23,41,.96);
  box-shadow:0 10px 30px rgba(6,14,26,.34);
  border-bottom-color:rgba(198,160,84,.28);
}
.hdr.scrolled .hdr-in{ height:64px; }
.hdr.scrolled .brand img{ height:36px; }
.hdr.scrolled .brand-tx b{ font-size:1.12rem; }
.hdr-in{ display:flex; align-items:center; gap:28px; height:clamp(72px,10vh,90px); transition:height var(--t); }
.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; margin-right:auto; }
.brand img{ height:clamp(40px,5.6vh,48px); width:auto; transition:height var(--t); }
.brand-tx b{ display:block; font-size:1.32rem; font-weight:700; letter-spacing:.26em;
             color:#eef3fa; line-height:1; transition:font-size var(--t); }
.brand-tx span{ display:block; margin-top:7px; font-size:.58rem; font-weight:600;
                letter-spacing:.23em; color:var(--gold-lt); }

.nav{ display:flex; align-items:center; gap:30px; }
.nav a{
  font-size:.79rem; font-weight:500; letter-spacing:.11em; text-transform:uppercase;
  color:#b9c6da; text-decoration:none; transition:var(--t); white-space:nowrap;
}
.nav > a{ position:relative; padding-block:6px; }
.nav > a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform var(--t);
}
.nav > a:hover::after,.nav > a[aria-current="page"]::after{ transform:scaleX(1); }
.nav a:hover,.nav a[aria-current="page"]{ color:var(--gold-lt); }
.nav > a.btn::after{ display:none; }
.nav .btn{ padding:10px 20px; font-size:.74rem; }
.nav a.btn-gold,.nav a.btn-gold:hover{ color:#14203a; }

.burger{ display:none; background:none; border:0; padding:8px; cursor:pointer; }
.burger span{ display:block; width:22px; height:2px; background:#dfe6f1; margin:4px 0; transition:var(--t); }

/* ---------- hero ---------------------------------------------------------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(150deg,#16263f 0%,var(--navy-800) 42%,#0b1729 100%);
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:url("map-net-v2.webp") center 30% / 100% auto no-repeat;
  opacity:.5; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(11,23,41,.15) 0%,rgba(11,23,41,.5) 62%,rgba(11,23,41,.82) 100%);
}
.hero-in{ position:relative; z-index:2; padding:clamp(52px,11vh,120px) 0 clamp(44px,9vh,96px); }
.hero h1{ color:#f5f8fd; max-width:24ch; }
.hero p{ margin-top:clamp(16px,2.8vh,24px); max-width:66ch; font-size:1.1rem; line-height:1.75; color:var(--on-dark); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(24px,4.4vh,38px); }
.hero-bar{
  position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:14px 54px;
  padding:clamp(18px,3vh,26px) 0 clamp(20px,3.4vh,30px); border-top:1px solid rgba(255,255,255,.1);
}
.hero-bar div{ font-size:.76rem; font-weight:600; letter-spacing:.17em;
               text-transform:uppercase; color:var(--mute); }
.hero-bar b{ color:var(--gold-lt); font-weight:700; }
.topline{ height:5px; background:linear-gradient(90deg,#8a6d33,var(--gold-lt) 45%,#8a6d33); }

/* ---------- sections ------------------------------------------------------ */
.sec{ padding:clamp(60px,10vh,96px) 0; }
.sec-tight{ padding:clamp(48px,7.5vh,70px) 0; }
.sec-alt{ background:var(--paper-2); }
.sec-dark{ background:var(--navy-deep); color:var(--on-dark); }
.sec-dark h2,.sec-dark h3{ color:#f3f7fd; }
.sec-dark .lede{ color:var(--mute-lt); }

.sec-head{ max-width:70ch; margin-bottom:clamp(34px,5.5vh,52px); }
.sec-head h2 + .lede{ margin-top:20px; }

/* ---------- page banner --------------------------------------------------- */
.banner{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(140deg,#16263f,#0d1c30);
}
.banner::before{
  content:""; position:absolute; inset:0;
  background:url("map-net-v2.webp") center 42% / 100% auto no-repeat;
  opacity:.3;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.banner-in{ position:relative; z-index:2; padding:clamp(52px,9vh,86px) 0 clamp(44px,7.5vh,74px); }
.banner h1{ color:#f5f8fd; font-size:clamp(2rem,min(4.2vw,6vh),3.1rem); }
.banner p{ margin-top:18px; max-width:62ch; color:var(--on-dark); }

/* ---------- cards --------------------------------------------------------- */
.grid{ display:grid; gap:26px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }

.card{
  position:relative; padding:clamp(26px,3.8vh,34px) 30px clamp(24px,3.6vh,32px);
  background:var(--paper-2); border:1px solid var(--rule); border-radius:var(--r);
  border-top:3px solid var(--gold); transition:var(--t);
}
.card:hover{ transform:translateY(-3px); box-shadow:0 14px 34px rgba(21,35,60,.09); }
.card .ico{
  display:grid; place-items:center; width:44px; height:44px; margin-bottom:clamp(16px,2.4vh,22px);
  border-radius:8px; background:var(--gold); color:#fff;
}
.card .ico svg{ width:21px; height:21px; }
.card h3{ margin-bottom:6px; }
.card .kick{
  display:block; margin-bottom:14px;
  font-size:.66rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
}
.card p{ font-size:.93rem; line-height:1.66; color:var(--body-2); }

.card-dark{
  background:rgba(255,255,255,.035); border-color:rgba(255,255,255,.1);
  border-top-color:var(--gold);
}
.card-dark p{ color:var(--mute-lt); }
.card-dark:hover{ box-shadow:none; background:rgba(255,255,255,.06); }

/* domain cards */
.domain{
  position:relative; overflow:hidden; padding:clamp(30px,4.2vh,38px) 34px clamp(28px,3.8vh,34px);
  border-radius:var(--r); background:var(--navy); color:var(--on-dark);
  border-top:3px solid var(--gold); transition:var(--t);
}
.domain:hover{ transform:translateY(-3px); }
.domain h3{ color:#f3f7fd; font-size:1.3rem; margin-bottom:10px; }
.domain .n{ font-size:.7rem; font-weight:700; letter-spacing:.2em; color:var(--gold); }
.domain p{ margin-top:14px; font-size:.94rem; color:var(--mute-lt); }
.domain ul{ margin:18px 0 0; padding:0; list-style:none; }
.domain li{ position:relative; padding-left:18px; margin-bottom:7px;
            font-size:.88rem; color:var(--on-dark); }
.domain li::before{ content:""; position:absolute; left:0; top:.62em;
                    width:6px; height:6px; border-radius:50%; background:var(--gold); }

/* ---------- lists --------------------------------------------------------- */
.ticks{ margin:0; padding:0; list-style:none; }
.ticks li{ position:relative; padding-left:26px; margin-bottom:11px;
           font-size:.96rem; color:var(--body-2); }
.ticks li::before{
  content:""; position:absolute; left:3px; top:.34em; width:6px; height:11px;
  border:2px solid var(--gold); border-top:0; border-left:0;
  transform:rotate(40deg);
}

/* ---------- stats --------------------------------------------------------- */
.stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:26px; }
.stat b{ display:block; font-size:clamp(1.9rem,2.5vw,2.6rem); font-weight:700; line-height:1; color:var(--gold); white-space:nowrap; }
.stat span{ display:block; margin-top:10px; font-size:.83rem; line-height:1.5; color:var(--mute); }

/* ---------- split --------------------------------------------------------- */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:60px; align-items:center; }
.split-img{ position:relative; border-radius:var(--r); overflow:hidden;
             background:var(--navy-deep); display:grid; place-items:center; padding:18px; }
.split-img img{ width:100%; opacity:1; }

/* ---------- people -------------------------------------------------------- */
.person{
  padding:30px 30px 28px; background:var(--paper-2);
  border:1px solid var(--rule); border-left:3px solid var(--gold); border-radius:var(--r);
}
.person h3{ font-size:1.08rem; margin-bottom:3px; }
.person .role{ display:block; margin-bottom:14px; font-size:.86rem; font-weight:500; color:var(--gold); }
.person p{ font-size:.9rem; line-height:1.64; color:var(--body-2); }

/* ---------- values strip -------------------------------------------------- */
.values{ display:flex; flex-wrap:wrap; gap:16px 46px; align-items:center;
         padding:26px 0; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); }
.values span{ font-size:.75rem; font-weight:600; letter-spacing:.2em;
              text-transform:uppercase; color:var(--mute); }
.values .lbl{ color:var(--gold); }

/* ---------- CTA ----------------------------------------------------------- */
.cta{ position:relative; overflow:hidden; background:linear-gradient(140deg,#16263f,#0b1729); }
.cta::before{ content:""; position:absolute; inset:0;
              background:url("map-net-v2.webp") center / 100% auto no-repeat;
              opacity:.26;
              -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
                      mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent); }
.cta-in{ position:relative; z-index:2; padding:clamp(56px,9vh,82px) 0; text-align:center; }
.cta h2{ color:#f5f8fd; }
.cta p{ margin:18px auto 32px; max-width:56ch; color:var(--on-dark); }

/* ---------- contact ------------------------------------------------------- */
.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.cblock{ margin-bottom:34px; }
.cblock h4{ font-size:.72rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase;
            color:var(--gold); padding-bottom:12px; border-bottom:1px solid var(--rule); margin-bottom:16px; }
.cblock p{ font-size:.97rem; color:var(--body-2); }
.cblock a{ color:var(--body-2); text-decoration:none; }
.cblock a:hover{ color:var(--gold); }
/* email address is an image, not text or a link, so scrapers can't harvest it */
.em-img{ display:inline-block; width:auto; height:1.396em; vertical-align:-.35em;
         user-select:none; -webkit-user-drag:none; pointer-events:none; }
/* clickable email: the address is put together only when clicked, see site.js */
.em-link{ display:inline-block; }
.em-link .em-img{ pointer-events:auto; cursor:pointer; transition:opacity var(--t); }
.em-link:hover .em-img{ opacity:.8; }

.note{ font-size:.8rem; color:var(--mute); }

/* ---------- footer -------------------------------------------------------- */
.ftr{ background:var(--navy-deep); color:var(--mute); padding:clamp(52px,8vh,72px) 0 0; }
.ftr-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:44px; padding-bottom:clamp(36px,5.5vh,52px); }
.ftr h5{ margin:0 0 18px; font-size:.72rem; font-weight:600; letter-spacing:.22em;
         text-transform:uppercase; color:var(--gold); }
.ftr p{ font-size:.9rem; line-height:1.7; color:var(--mute); }
.ftr ul{ margin:0; padding:0; list-style:none; }
.ftr li{ margin-bottom:10px; }
.ftr li a{ font-size:.9rem; color:var(--mute); text-decoration:none; transition:var(--t); }
.ftr li a:hover{ color:var(--gold-lt); }
.ftr p a{ color:var(--mute); text-decoration:none; transition:var(--t); }
.ftr p a:hover{ color:var(--gold-lt); }
.ftr .brand img{ height:54px; }
.ftr .brand-tx b{ font-size:1.22rem; }
.ftr-btm{
  display:flex; flex-wrap:wrap; gap:12px 30px; justify-content:space-between;
  padding:24px 0 30px; border-top:1px solid rgba(255,255,255,.08);
  font-size:.78rem; color:#6f7f98;
}
.ftr-btm .url{ letter-spacing:.24em; font-weight:600; color:var(--gold); }

/* ---------- responsive ---------------------------------------------------- */
/* HD laptops (1366–1920 wide): the hero fills the first screen below the header */
@media (min-width:981px) and (min-height:600px){
  .hero{ display:flex; flex-direction:column;
         min-height:calc(100vh - 5px - clamp(72px,10vh,90px)); }
  .hero-in{ flex:1; display:flex; flex-direction:column; justify-content:center; }
}
/* wider HD screens: use more of the width and step the type up slightly */
@media (min-width:1440px){
  :root{ --wrap:1240px; }
}
@media (min-width:1760px){
  :root{ --wrap:1340px; }
  html{ font-size:106.25%; }
}
@media (max-width:980px){
  .g3{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .stat{ min-width:0; }
  .split,.contact-grid{ grid-template-columns:1fr; gap:38px; }
  .ftr-grid{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:760px){
  .stat b{ font-size:1.6rem; }
  :root{ --gut:20px; --hdr-h:76px; }
  .hdr-in,.hdr.scrolled .hdr-in{ height:76px; }
  .burger{ display:block; }
  .nav{
    position:fixed; inset:var(--hdr-h,90px) 0 auto; flex-direction:column; align-items:stretch; gap:0;
    padding:10px 20px 26px; background:#0e1d32;
    border-bottom:1px solid rgba(255,255,255,.1);
    transform:translateY(-130%); transition:var(--t); max-height:calc(100vh - var(--hdr-h,90px)); overflow:auto;
  }
  .nav.open{ transform:translateY(0); }
  .nav a{ padding:15px 0; border-bottom:1px solid rgba(255,255,255,.07); font-size:.85rem; }
  .nav .btn{ margin-top:18px; justify-content:center; border-bottom:0; }
  .hero-in{ padding:76px 0 60px; }
  .sec{ padding:66px 0; }
  .g2,.g3{ grid-template-columns:1fr; }
  .hero-bar{ gap:14px 30px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; scroll-behavior:auto !important; }
}


/* ==========================================================================
   Motion — scroll reveal and cross-document page transitions
   ========================================================================== */

.reveal{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s cubic-bezier(.22,.7,.3,1), transform .7s cubic-bezier(.22,.7,.3,1);
  transition-delay:var(--d,0ms);
  will-change:opacity, transform;
}
.reveal.in{ opacity:1; transform:none; }

/* Chromium ships cross-document view transitions for same-origin MPA nav.
   Browsers without it simply navigate normally — nothing breaks. */
@view-transition{ navigation:auto; }

::view-transition-old(root){
  animation:vt-out .26s cubic-bezier(.4,0,1,1) both;
}
::view-transition-new(root){
  animation:vt-in .42s cubic-bezier(0,0,.2,1) both;
}
@keyframes vt-out{ to{ opacity:0; transform:translateY(-10px) scale(.994); } }
@keyframes vt-in { from{ opacity:0; transform:translateY(14px) scale(1.004); } }

/* the masthead should stay put across the transition, not cross-fade with the page */
.hdr{ view-transition-name:masthead; }
.topline{ view-transition-name:topline; }
::view-transition-group(masthead),
::view-transition-group(topline){ animation-duration:.26s; }

/* fallback fade used when @view-transition is unsupported */
body{ animation:page-in .45s ease-out both; }
@keyframes page-in{ from{ opacity:0; } to{ opacity:1; } }
html.vt-native body{ animation:none; }

@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1 !important; transform:none !important; transition:none !important; }
  body{ animation:none !important; }
  ::view-transition-old(root),::view-transition-new(root){ animation:none !important; }
}


/* ---- map marker: highlighted country ------------------------------------ */
.map-wrap{ position:relative; display:block; width:100%; }
.geo-pin{
  position:absolute; left:var(--x); top:var(--y);
  transform:translate(-50%,-50%); pointer-events:none; z-index:2;
}
.geo-pin i{
  position:relative; display:block; width:13px; height:13px; border-radius:50%;
  background:var(--gold);
  box-shadow:0 0 0 5px rgba(198,160,84,.22), 0 0 30px 14px rgba(198,160,84,.34);
}
.geo-pin i::before,
.geo-pin i::after{
  content:""; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid rgba(217,189,122,.75);
  animation:ping 2.8s cubic-bezier(.2,.6,.3,1) infinite;
}
.geo-pin i::after{ animation-delay:1.4s; }
.geo-pin b{
  position:absolute; left:22px; top:50%; transform:translateY(-50%);
  font-size:.64rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-lt); white-space:nowrap;
  text-shadow:0 1px 10px rgba(6,14,26,.9);
}
@keyframes ping{
  0%   { transform:scale(.6); opacity:.9; }
  70%  { transform:scale(2.6); opacity:0; }
  100% { transform:scale(2.6); opacity:0; }
}
@media (prefers-reduced-motion:reduce){
  .geo-pin i::before,.geo-pin i::after{ animation:none; opacity:.5; }
}




/* ==========================================================================
   Network map — hero vector layer
   ========================================================================== */

/* hero: the raster map with the traced network drawn over it as live SVG */
.hero.has-net::before,.hero:has(.netmap)::before{ display:none; }
.netmap{
  position:absolute; inset:0; pointer-events:none; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent);
}
.netmap-in{
  position:absolute; left:50%; top:30%;
  width:max(100%,980px); aspect-ratio:1672/941;
  transform:translate(-50%,-30%);
}
.netmap-in img,.netmap-in svg{ position:absolute; inset:0; width:100%; height:100%; }
.netmap-in img{ opacity:.78; }
.netmap-in svg{ overflow:visible; }

.nx-l{
  stroke:#b9cbe4; stroke-width:1.1; stroke-opacity:.5; fill:none;
  vector-effect:non-scaling-stroke;
  stroke-dasharray:var(--len) var(--len); stroke-dashoffset:var(--len);
  transition:stroke .35s, stroke-opacity .35s, stroke-width .35s;
}
.go .nx-l{ animation:nx-draw 1.6s cubic-bezier(.45,.05,.3,1) var(--d,0s) forwards; }
.nx-l.hot{ stroke:#ffd56a; stroke-opacity:.75; stroke-width:1.7; }
.nx-l.trail{ stroke:#f1d89a; stroke-opacity:1; stroke-width:2; transition-duration:.08s; }
@keyframes nx-draw{ to{ stroke-dashoffset:0; } }

.nx-n{
  fill:#c9d7ea; opacity:0; transform-box:fill-box; transform-origin:center;
  transition:fill .3s, transform .3s;
}
.go .nx-n{ animation:nx-pop .5s ease-out var(--d,0s) forwards; }
.go .nx-n.tw{ animation:nx-pop .5s ease-out var(--d,0s) forwards, nx-twinkle 3.6s ease-in-out var(--t,0s) infinite; }
.nx-n.hot,.nx-n.flash{ fill:#ffd56a; fill-opacity:.75; transform:scale(1.9); }
@keyframes nx-pop{ from{ opacity:0; transform:scale(.2); } to{ opacity:.95; transform:scale(1); } }
@keyframes nx-twinkle{ 0%,100%{ fill:#c9d7ea; } 50%{ fill:var(--gold-lt); } }

.nx-p{ fill:#ffd56a; }
/* hero: the map itself leads, the live network sits quietly on top of it */
.netmap .nx-l{ stroke-opacity:.14; stroke-width:.9; }
.netmap .nx-l.hot{ stroke:#ffd56a; stroke-opacity:.75; stroke-width:1.6; }
.netmap .nx-n{ fill-opacity:.4; }
.netmap .nx-n.hot,.netmap .nx-n.flash{ fill-opacity:.75; }
.netmap .nx-p{ fill-opacity:1; }


@media (prefers-reduced-motion:reduce){
  .nx-l{ animation:none; stroke-dashoffset:0; }
  .nx-n,.nx-n.tw{ animation:none; opacity:.95; }
}


/* ---- "Find people faster" panel: live network with a gold locator ------- */
.net-panel{ display:block; cursor:crosshair; }
.net-stage{ position:relative; display:block; width:100%; aspect-ratio:1672/941; }
.net-stage img,.net-stage svg{ position:absolute; inset:0; width:100%; height:100%; }
.net-stage img{ opacity:.72; transition:opacity .5s; }
.net-panel:hover .net-stage img{ opacity:.62; }
.net-stage svg{ overflow:visible; }
.net-panel .nx-l{ stroke:#d2deef; stroke-opacity:.28; stroke-width:.9; }
.net-panel .nx-l.hot{ stroke:#ffd56a; stroke-opacity:.75; stroke-width:1.5; }
.net-panel .nx-l.trail{ stroke:#f1d89a; stroke-opacity:1; }

.nx-n.lock{ fill:#fff3d1; transform:scale(2.4); }
.nx-p.fast{ fill:#ffe08a; }

.nx-ping{
  fill:none; stroke:var(--gold-lt); stroke-width:1.5; vector-effect:non-scaling-stroke;
  transform-box:fill-box; transform-origin:center;
  animation:nx-ping 1.4s cubic-bezier(.2,.6,.3,1) forwards;
}
.nx-ping.late{ stroke:#f1d89a; }
.nx-ping.major{ stroke:#fff0c4; stroke-width:2.4; animation:nx-major 1.3s cubic-bezier(.15,.7,.3,1) forwards; }
.nx-ping.m2{ stroke:var(--gold-lt); animation-duration:1.5s; }
.nx-ping.m3{ stroke:var(--gold); animation-duration:1.7s; }
@keyframes nx-major{ from{ transform:scale(.3); opacity:1; } to{ transform:scale(7); opacity:0; } }
.nx-n.found{ fill:#fff; transform:scale(3); }
.nx-ret.seeking{ opacity:.55; }
.nx-ret.seeking .nx-ring{ animation-duration:9s; stroke:var(--gold); }
.nx-ret.seeking .nx-sweep{ opacity:.35; }
.nx-ret.burst .nx-ret-in{ transform-box:fill-box; transform-origin:center; animation:nx-burst .7s cubic-bezier(.2,1.3,.4,1); }
@keyframes nx-burst{ 0%{ transform:scale(1); } 35%{ transform:scale(1.45); } 100%{ transform:scale(1); } }
@keyframes nx-ping{ from{ transform:scale(.25); opacity:1; } to{ transform:scale(3.4); opacity:0; } }

.nx-ret{ opacity:0; transition:opacity .3s; pointer-events:none; }
.nx-ret.on{ opacity:1; }
.nx-ret circle,.nx-ret path{ vector-effect:non-scaling-stroke; }
.nx-ring{ fill:none; stroke:var(--gold-lt); stroke-width:1.4; stroke-dasharray:14 9;
          transform-box:fill-box; transform-origin:center; animation:nx-spin 6s linear infinite;
          transition:stroke .25s; }
.nx-ring2{ fill:none; stroke:rgba(217,189,122,.35); stroke-width:1; }
.nx-ticks{ stroke:var(--gold-lt); stroke-width:1.4; fill:none; }
.nx-dot{ fill:#f1d89a; }
.nx-sweep{ transform-origin:0 0; animation:nx-sweep 3.2s linear infinite; opacity:.7; }
.nx-ret.locked .nx-ring{ stroke:#fff0c4; animation-duration:3s; }
.nx-ret.locked .nx-ring2{ stroke:rgba(241,216,154,.7); }
@keyframes nx-spin{ to{ transform:rotate(360deg); } }
@keyframes nx-sweep{ from{ transform:rotate(0deg); } to{ transform:rotate(360deg); } }

.nx-label{
  fill:#fff; font-family:Poppins,sans-serif; font-weight:600; letter-spacing:.22em;
  opacity:0; pointer-events:none;
}
.nx-label.on{ opacity:1; transition:opacity .3s; }
.nx-label.seeking{ animation:nx-seek 1.2s ease-in-out infinite; }
.nx-label.found{ transform-box:fill-box; transform-origin:left center;
                 animation:nx-found .6s cubic-bezier(.2,1.4,.4,1); }
@keyframes nx-seek{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }
.nx-label-bg{ opacity:0; pointer-events:none; transition:opacity .3s, fill .3s; }
.nx-label-bg.on{ opacity:.95; }
.nx-label-bg.seeking{ fill:#7f1d1d; }                          /* dark red: locating */
.nx-label-bg.found{ fill:#14532d; transform-box:fill-box; transform-origin:left center;
                    animation:nx-found .6s cubic-bezier(.2,1.4,.4,1); }   /* dark green: located */
@keyframes nx-found{ from{ transform:scale(1.6); opacity:0; } to{ transform:scale(1); opacity:1; } }

@media (prefers-reduced-motion:reduce){
  .nx-ring,.nx-sweep{ animation:none; }
}


/* ---- Africa panels: Nigeria's border traces itself in gold on hover ------ */
.ng-border{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1;
            overflow:visible; }
.ng-border path{ fill:none; stroke-linejoin:round; stroke-linecap:round; }
.ng-fill{ fill:rgba(198,160,84,0) !important; transition:fill .6s; }
.ng-line{ stroke:var(--gold-lt); stroke-width:5; stroke-dasharray:100; stroke-dashoffset:100;
          opacity:0; transition:opacity .3s, stroke-dashoffset 0s .3s; }
.ng-run{ stroke:#fff0c4; stroke-width:7.5; stroke-dasharray:7 93; opacity:0; transition:opacity .3s; }
.split-img:hover .ng-fill{ fill:rgba(198,160,84,.16) !important; }
.split-img:hover .ng-line{ opacity:1; stroke-dashoffset:0;
                           transition:opacity .2s, stroke-dashoffset 1.4s cubic-bezier(.5,.1,.3,1); }
.split-img:hover .ng-run{ opacity:1; transition:opacity .4s 1.2s; animation:ng-run 2.6s linear 1.2s infinite; }
@keyframes ng-run{ from{ stroke-dashoffset:100; } to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion:reduce){
  .split-img:hover .ng-line{ transition:none; }
  .split-img:hover .ng-run{ animation:none; opacity:0; }
}