/* ==========================================================================
   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:100px; }

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

img{ max-width:100%; 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,5.2vw,3.85rem); }
h2{ font-size:clamp(1.85rem,3.4vw,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:70px; }
.hdr.scrolled .brand img{ height:38px; }
.hdr.scrolled .brand-tx b{ font-size:1.12rem; }
.hdr-in{ display:flex; align-items:center; gap:28px; height:90px; transition:height var(--t); }
.brand{ display:flex; align-items:center; gap:13px; text-decoration:none; margin-right:auto; }
.brand img{ height: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; }

.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-world.png") center 26% / 100% auto no-repeat;
  opacity:.62; 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,.25) 0%,rgba(11,23,41,.72) 62%,rgba(11,23,41,.94) 100%);
}
.hero-in{ position:relative; z-index:2; padding:120px 0 96px; }
.hero h1{ color:#f5f8fd; max-width:15ch; }
.hero p{ margin-top:24px; max-width:60ch; font-size:1.1rem; line-height:1.75; color:var(--on-dark); }
.hero-cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.hero-bar{
  position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:14px 54px;
  padding:26px 0 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:96px 0; }
.sec-tight{ padding: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: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-world.png") center 40% / 100% auto no-repeat;
  opacity:.42;
  -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:86px 0 74px; }
.banner h1{ color:#f5f8fd; font-size:clamp(2rem,4.2vw,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:34px 30px 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: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:38px 34px 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(4,1fr); gap:26px; }
.stat b{ display:block; font-size:2.8rem; font-weight:700; line-height:1; color:var(--gold); }
.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-world.png") center / 100% auto no-repeat;
              opacity:.34;
              -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: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); }

form label{ display:block; margin-bottom:6px; font-size:.76rem; font-weight:600;
            letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
form input,form select,form textarea{
  width:100%; margin-bottom:20px; padding:13px 15px;
  font:inherit; font-size:.95rem; color:var(--ink);
  background:#fff; border:1px solid #d6dbe4; border-radius:6px; transition:var(--t);
}
form input:focus,form select:focus,form textarea:focus{
  outline:0; border-color:var(--gold); box-shadow:0 0 0 3px rgba(198,160,84,.15);
}
form textarea{ min-height:130px; resize:vertical; }
.note{ font-size:.8rem; color:var(--mute); }

/* ---------- footer -------------------------------------------------------- */
.ftr{ background:var(--navy-deep); color:var(--mute); padding:72px 0 0; }
.ftr-grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:44px; padding-bottom: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 .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 ---------------------------------------------------- */
@media (max-width:980px){
  .g3{ grid-template-columns:repeat(2,1fr); }
  .stats{ grid-template-columns:repeat(2,1fr); }
  .split,.contact-grid{ grid-template-columns:1fr; gap:38px; }
  .ftr-grid{ grid-template-columns:1fr 1fr; gap:36px; }
}
@media (max-width:760px){
  :root{ --gut:20px; }
  .burger{ display:block; }
  .nav{
    position:fixed; inset: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 - 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; }
}