/*
  MDN – shared stylesheet for MDN Group, MDN Technologies and MDN Exports.
  Upload this single file beside the three HTML pages (style.css).

  - Rules without a prefix are shared by every page.
  - Rules prefixed body.page-tech / body.page-exports / body.page-group apply to one page only,
    where that page deliberately differs (for example the hero height or the figures strip colour).
*/

:root{
  --mdn-blue:#1a7af0;
  --mdn-blue-dark:#1565d0;
  --mdn-navy:#0a1a35;
  --mdn-navy-2:#0c2142;
  --mdn-ink:#14213d;
  --mdn-muted:#5b6b82;
  --mdn-line:#e3e9f1;
  --mdn-soft:#f4f8fd;
  --bs-body-font-family:"Inter","Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  --bs-body-color:var(--mdn-ink)
}

body{
  font-size:.95rem;
  -webkit-font-smoothing:antialiased
}

h1,
h2,
h3,
h4,
h5{
  font-weight:600;
  letter-spacing:-.01em
}

.btn-mdn{
  background:var(--mdn-blue);
  border-color:var(--mdn-blue);
  color:#fff;
  font-weight:500;
  border-radius:50rem;
  padding:.65rem 1.5rem;
  font-size:.85rem
}

.btn-mdn:hover,
.btn-mdn:focus{
  background:var(--mdn-blue-dark);
  border-color:var(--mdn-blue-dark);
  color:#fff
}

.btn-mdn-outline{
  background:transparent;
  border:1px solid rgba(255,255,255,.55);
  color:#fff;
  font-weight:500;
  border-radius:.75rem;
  padding:.65rem 1.9rem;
  font-size:.85rem
}

.btn-mdn-outline:hover{
  background:#fff;
  color:var(--mdn-navy)
}

.btn-pill-sm{
  padding:.5rem 1.1rem;
  font-size:.78rem
}

.eyebrow{
  display:flex;
  align-items:center;
  gap:.7rem;
  color:var(--mdn-blue);
  font-weight:600;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:1rem
}

.eyebrow::before{
  content:"";
  width:28px;
  height:2px;
  background:var(--mdn-blue)
}

.mdn-logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  color:var(--mdn-navy)
}

.mdn-logo .logo-mark{
  font-weight:800;
  font-size:1.7rem;
  letter-spacing:-.04em;
  line-height:1;
  color:var(--mdn-navy)
}

.mdn-logo .logo-mark b{
  color:var(--mdn-blue);
  font-weight:800
}

.mdn-logo .sep{
  width:1px;
  height:24px;
  background:#9aa7ba;
  margin:0 .65rem
}

.mdn-logo .word{
  font-size:.95rem;
  font-weight:400
}

.mdn-logo.light,
.mdn-logo.light .logo-mark{
  color:#fff
}

.mdn-logo.light .sep{
  background:rgba(255,255,255,.5)
}

.navbar{
  background:#fff;
  border-bottom:1px solid var(--mdn-line);
  padding:.7rem 0
}

.navbar .nav-link{
  color:var(--mdn-ink);
  font-size:.8rem;
  padding:.55rem 1rem!important;
  border-bottom:2px solid transparent;
  border-radius:0
}

.navbar .nav-link:hover{
  color:var(--mdn-blue)
}

.navbar .nav-link.active{
  color:var(--mdn-blue);
  border-bottom-color:var(--mdn-blue)
}

body.page-tech .hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(100deg,#091a36 0%,#0a2044 55%,#0b2550 100%);
  padding:5.2rem 0 5.6rem
}
body.page-exports .hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(100deg,#091a36 0%,#0a2044 55%,#0b2550 100%);
  padding:5.2rem 0 5.6rem
}
body.page-group .hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  background:linear-gradient(100deg,#091a36 0%,#0a2044 55%,#0b2550 100%);
  padding:5.2rem 0 6.8rem
}

.hero .skyline{
  position:absolute;
  right:0;
  bottom:0;
  height:100%;
  width:62%;
  pointer-events:none;
  opacity:.95
}

.hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,#091a36 28%,rgba(9,26,54,.35) 62%,rgba(9,26,54,0) 100%)
}

.hero .container{
  position:relative;
  z-index:2
}

.hero h1{
  font-size:clamp(2.1rem,4.4vw,3.1rem);
  line-height:1.12;
  font-weight:600;
  margin-bottom:1.6rem
}

.hero h1 span{
  color:var(--mdn-blue)
}

body.page-tech .hero p.lead{
  font-size:.95rem;
  color:#dbe5f5;
  max-width:420px;
  line-height:1.7;
  margin-bottom:2rem
}
body.page-exports .hero p.lead{
  font-size:.95rem;
  color:#dbe5f5;
  max-width:430px;
  line-height:1.7;
  margin-bottom:2rem
}
body.page-group .hero p.lead{
  font-size:.95rem;
  color:#dbe5f5;
  max-width:440px;
  line-height:1.7;
  margin-bottom:2rem
}

.services{
  padding:4.2rem 0 3.6rem;
  background:#fff
}

.services h2{
  font-size:1.65rem;
  margin-bottom:.8rem
}

.services .intro{
  color:var(--mdn-muted);
  max-width:460px;
  line-height:1.65
}

.svc-card{
  height:100%;
  border:1px solid var(--mdn-line);
  border-radius:.55rem;
  padding:1.5rem 1.5rem 1.35rem;
  background:#fff;
  transition:.2s
}

.svc-card:hover{
  box-shadow:0 10px 26px rgba(20,33,61,.08);
  transform:translateY(-3px)
}

.svc-card h3{
  font-size:.98rem;
  font-weight:500;
  margin:1rem 0 .55rem
}

.svc-card p{
  font-size:.8rem;
  color:var(--mdn-muted);
  line-height:1.65;
  margin:0
}

.ico{
  width:48px;
  height:48px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:1.3rem
}

.ico.blue{
  background:#e5effd;
  color:#1a73e8
}

.ico.indigo{
  background:#ebe9fb;
  color:#5b4fd8
}

.ico.green{
  background:#e0f4ec;
  color:#16a06c
}

body.page-tech .why{
  background:var(--mdn-soft);
  padding:3.4rem 0 3.2rem
}
body.page-exports .why{
  background:#fff;
  padding:3.4rem 0 3.2rem
}
body.page-group .why{
  background:var(--mdn-soft);
  padding:3.4rem 0 3.2rem
}

.why h2{
  font-size:1.65rem;
  line-height:1.3;
  margin-bottom:1.6rem
}

.why .copy{
  color:var(--mdn-muted);
  max-width:330px;
  line-height:1.7
}

.feat i{
  font-size:1.55rem;
  color:var(--mdn-blue);
  display:block;
  margin-bottom:.45rem
}

.feat h4{
  font-size:.8rem;
  font-weight:500;
  margin-bottom:.35rem
}

.feat p{
  font-size:.7rem;
  color:var(--mdn-muted);
  line-height:1.55;
  margin:0;
  max-width:160px
}

.about .navy{
  background:var(--mdn-navy);
  color:#fff;
  padding:3rem 0 3rem
}

.about .navy h2{
  font-size:1.6rem;
  line-height:1.25;
  margin-bottom:1rem
}

.about .navy p{
  font-size:.78rem;
  color:#cbd7ea;
  line-height:1.65;
  max-width:400px;
  margin-bottom:1.3rem
}

.about .vision{
  align-self:stretch;
  min-height:260px;
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#fff 30%,#dfeafb 100%);
  display:flex;
  align-items:center
}

.about .vision .glass{
  position:absolute;
  right:-30px;
  top:0;
  bottom:0;
  width:48%;
  background:linear-gradient(115deg,rgba(255,255,255,.0) 0 18%,rgba(160,190,235,.35) 18% 20%,rgba(255,255,255,0) 20% 40%,rgba(160,190,235,.3) 40% 42%,rgba(255,255,255,0) 42% 62%,rgba(160,190,235,.28) 62% 64%,rgba(255,255,255,0) 64%),linear-gradient(180deg,rgba(120,160,225,.18),rgba(120,160,225,.38));
  transform:skewX(-8deg)
}

.about .vision blockquote{
  position:relative;
  z-index:2;
  margin:0;
  padding:2rem 2.2rem 2rem 4rem;
  max-width:480px
}

.about .vision .tag{
  display:flex;
  align-items:center;
  gap:.5rem;
  color:var(--mdn-blue);
  font-size:.55rem;
  font-weight:700;
  margin-bottom:.8rem
}

.about .vision .tag::before{
  content:"";
  width:22px;
  height:2px;
  background:var(--mdn-blue)
}

.about .vision p{
  font-size:.85rem;
  line-height:1.85;
  margin-bottom:1.3rem
}

.about .vision cite{
  font-style:normal;
  font-size:.72rem;
  color:var(--mdn-muted)
}

.cta{
  background:var(--mdn-navy-2);
  color:#fff;
  padding:1.5rem 0;
  border-top:1px solid rgba(255,255,255,.08)
}

.cta .divider{
  width:1px;
  height:38px;
  background:rgba(255,255,255,.2)
}

.cta h5{
  font-size:.88rem;
  font-weight:500;
  margin:0 0 .15rem
}

.cta small{
  color:#cbd7ea;
  font-size:.74rem
}

.foot{
  background:#08142b;
  color:#b9c6dc;
  font-size:.68rem;
  padding:1.35rem 0
}

.foot a{
  color:#b9c6dc;
  text-decoration:none
}

.foot a:hover{
  color:#fff
}

.foot .links a+a{
  border-left:1px solid rgba(255,255,255,.25);
  margin-left:.7rem;
  padding-left:.7rem
}

.group-bar{
  background:#08142b;
  color:#b9c6dc;
  font-size:.7rem
}

.group-bar .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:.4rem 1rem;
  padding-top:.4rem;
  padding-bottom:.4rem;
  flex-wrap:wrap
}

.group-bar a{
  color:#b9c6dc;
  text-decoration:none
}

.group-bar a:hover{
  color:#fff
}

.group-bar .cos a+a{
  border-left:1px solid rgba(255,255,255,.25);
  margin-left:.8rem;
  padding-left:.8rem
}

.group-bar .cos a.current{
  color:#fff;
  font-weight:600
}

html{
  scroll-behavior:smooth
}

section[id]{
  scroll-margin-top:64px
}

.section-title{
  font-size:1.65rem;
  margin-bottom:.8rem
}

.section-intro{
  color:var(--mdn-muted);
  max-width:520px;
  line-height:1.65
}

.hero .scene{
  position:absolute;
  right:0;
  bottom:0;
  height:100%;
  width:64%;
  pointer-events:none;
  opacity:.95
}

body.page-exports .figures{
  background:#fff;
  border-bottom:1px solid var(--mdn-line)
}
body.page-group .figures{
  background:var(--mdn-navy);
  color:#fff
}

body.page-exports .figures .fig{
  padding:1.6rem 1rem;
  text-align:center;
  border-right:1px solid var(--mdn-line)
}
body.page-group .figures .fig{
  padding:1.7rem 1rem;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.12)
}

.figures .col-6:last-child .fig,
.figures .col-lg-3:last-child .fig{
  border-right:0
}

body.page-exports .figures b{
  display:block;
  font-size:1.7rem;
  font-weight:600;
  color:var(--mdn-blue);
  line-height:1.1
}
body.page-group .figures b{
  display:block;
  font-size:1.8rem;
  font-weight:600;
  color:#5aa0ff;
  line-height:1.1
}

body.page-exports .figures span{
  font-size:.72rem;
  color:var(--mdn-muted);
  text-transform:uppercase;
  letter-spacing:.1em
}
body.page-group .figures span{
  font-size:.7rem;
  color:#b9c6dc;
  text-transform:uppercase;
  letter-spacing:.1em
}

.products{
  padding:4.2rem 0 3.6rem;
  background:#fff
}

.svc-card .tags{
  margin-top:.9rem;
  display:flex;
  flex-wrap:wrap;
  gap:.35rem
}

.svc-card .tags span{
  font-size:.66rem;
  color:var(--mdn-blue-dark);
  background:#eef4fe;
  border-radius:50rem;
  padding:.2rem .6rem
}

.ico.amber{
  background:#fdf0dc;
  color:#c27a10
}

.process{
  background:var(--mdn-soft);
  padding:3.6rem 0 3.4rem
}

.step{
  position:relative;
  text-align:center;
  padding:0 .6rem
}

.step .num{
  width:56px;
  height:56px;
  margin:0 auto .9rem;
  border-radius:50%;
  background:#fff;
  border:1px solid var(--mdn-line);
  display:grid;
  place-items:center;
  color:var(--mdn-blue);
  font-size:1.4rem;
  position:relative;
  z-index:1
}

.step h4{
  font-size:.88rem;
  font-weight:500;
  margin-bottom:.35rem
}

.step p{
  font-size:.74rem;
  color:var(--mdn-muted);
  line-height:1.6;
  margin:0 auto;
  max-width:180px
}

.step small{
  display:block;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--mdn-blue);
  margin-bottom:.2rem
}

.markets{
  background:var(--mdn-soft);
  padding:3.6rem 0 3.4rem
}

.region{
  height:100%;
  background:#fff;
  border:1px solid var(--mdn-line);
  border-radius:.55rem;
  padding:1.3rem 1.4rem
}

.region h3{
  font-size:.95rem;
  font-weight:500;
  margin:0 0 .15rem;
  display:flex;
  align-items:center;
  gap:.5rem
}

.region h3 i{
  color:var(--mdn-blue)
}

.region small{
  color:var(--mdn-muted);
  font-size:.7rem;
  display:block;
  margin-bottom:.7rem
}

.region p{
  font-size:.78rem;
  color:var(--mdn-muted);
  line-height:1.7;
  margin:0
}

.certs{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:1.6rem
}

.certs span{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  background:#fff;
  border:1px solid var(--mdn-line);
  border-radius:50rem;
  padding:.4rem .9rem;
  font-size:.72rem;
  font-weight:500
}

.certs i{
  color:#16a06c
}

body.page-exports .contact{
  background:#fff;
  padding:3.8rem 0 3.6rem
}
body.page-group .contact{
  background:#fff;
  padding:3.6rem 0 3.4rem
}

.contact .info li{
  display:flex;
  gap:.9rem;
  align-items:flex-start;
  margin-bottom:1.1rem
}

.contact .info i{
  flex:none
}

.contact .info b{
  display:block;
  font-weight:500;
  font-size:.85rem
}

.contact .info span{
  font-size:.78rem;
  color:var(--mdn-muted)
}

.contact .form-card{
  border:1px solid var(--mdn-line);
  border-radius:.55rem;
  padding:1.8rem;
  background:#fff;
  box-shadow:0 10px 26px rgba(20,33,61,.05)
}

.contact label{
  font-size:.72rem;
  font-weight:600;
  color:var(--mdn-muted);
  text-transform:uppercase;
  letter-spacing:.08em;
  margin-bottom:.3rem
}

.contact .form-control,
.contact .form-select{
  font-size:.85rem;
  border-color:var(--mdn-line);
  border-radius:.45rem;
  padding:.6rem .8rem
}

.contact .form-control:focus,
.contact .form-select:focus{
  border-color:var(--mdn-blue);
  box-shadow:0 0 0 .2rem rgba(26,122,240,.12)
}

.navbar .dropdown-menu{
  border:1px solid var(--mdn-line);
  border-radius:.55rem;
  box-shadow:0 10px 26px rgba(20,33,61,.1);
  padding:.4rem;
  font-size:.8rem;
  min-width:230px
}

.navbar .dropdown-item{
  border-radius:.4rem;
  padding:.55rem .8rem;
  display:flex;
  align-items:center;
  gap:.6rem
}

.navbar .dropdown-item i{
  color:var(--mdn-blue)
}

.navbar .dropdown-item:hover{
  background:var(--mdn-soft);
  color:var(--mdn-blue)
}

.choose{
  margin-top:-4rem;
  position:relative;
  z-index:5;
  padding-bottom:3.4rem
}

.company{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--mdn-line);
  border-radius:.75rem;
  padding:1.9rem 1.9rem 1.7rem;
  box-shadow:0 18px 40px rgba(10,26,53,.12);
  transition:.25s;
  overflow:hidden
}

.company::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  right:0;
  height:4px;
  background:var(--mdn-blue)
}

.company.exports::before{
  background:linear-gradient(90deg,#16a06c,#1a7af0)
}

.company:hover{
  transform:translateY(-6px);
  box-shadow:0 24px 48px rgba(10,26,53,.18)
}

.company .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  margin-bottom:1.1rem
}

.company .ico{
  width:54px;
  height:54px;
  font-size:1.5rem;
  flex:none
}

.company .kicker{
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--mdn-muted)
}

.company h3{
  font-size:1.25rem;
  margin:.9rem 0 .2rem
}

.company .tagline{
  color:var(--mdn-blue);
  font-weight:500;
  font-size:.85rem;
  margin-bottom:.8rem
}

.company p{
  font-size:.84rem;
  color:var(--mdn-muted);
  line-height:1.7
}

.company ul{
  list-style:none;
  padding:0;
  margin:.4rem 0 1.5rem;
  display:grid;
  gap:.45rem
}

.company li{
  font-size:.8rem;
  display:flex;
  gap:.55rem;
  align-items:flex-start
}

.company li i{
  color:#16a06c;
  margin-top:.1rem
}

.company .go{
  margin-top:auto;
  display:flex;
  align-items:center;
  gap:1rem
}

.company .go small{
  color:var(--mdn-muted);
  font-size:.72rem
}

.contact .desk{
  height:100%;
  border:1px solid var(--mdn-line);
  border-radius:.55rem;
  padding:1.4rem 1.5rem;
  background:#fff
}

.contact .desk h3{
  font-size:.98rem;
  font-weight:500;
  margin:0 0 .35rem
}

.contact .desk p{
  font-size:.8rem;
  color:var(--mdn-muted);
  line-height:1.65;
  margin:0 0 .9rem
}

.contact .desk a.mail{
  font-size:.8rem;
  font-weight:500;
  color:var(--mdn-blue);
  text-decoration:none
}

@media (max-width:991.98px) {
  body.page-tech .hero{
    padding:4rem 0
  }
  body.page-exports .hero{
    padding:4rem 0
  }
  body.page-group .hero{
    padding:4rem 0 6rem
  }
  .hero .skyline{
    width:100%;
    opacity:.45
  }
  .hero::after{
    background:linear-gradient(90deg,#091a36 10%,rgba(9,26,54,.55) 100%)
  }
  .navbar .nav-link.active{
    border-bottom-color:transparent
  }
  .why .copy{
    max-width:none;
    margin-bottom:2rem
  }
  .cta .divider{
    display:none
  }
  .hero .scene{
    width:100%;
    opacity:.45
  }
  .figures .fig:nth-child(odd){
    border-right:1px solid var(--mdn-line)
  }
  .figures .col-6:nth-child(2) .fig{
    border-right:0
  }
  body.page-exports .figures .col-6:nth-child(-n+2) .fig{
    border-bottom:1px solid var(--mdn-line)
  }
  body.page-group .figures .col-6:nth-child(-n+2) .fig{
    border-bottom:1px solid rgba(255,255,255,.12)
  }
  .figures .col-6:nth-child(odd) .fig{
    border-right:1px solid rgba(255,255,255,.12)
  }
}

@media (max-width:575.98px) {
  .foot .row>div{
    text-align:center!important
  }
  .about .vision blockquote{
    padding:2rem 1.5rem
  }
  .contact .form-card{
    padding:1.3rem
  }
  .company{
    padding:1.6rem 1.4rem 1.4rem
  }
}

@media (min-width:992px) {
  .step:not(:last-child)::after{
    content:"";
    position:absolute;
    top:28px;
    left:calc(50% + 34px);
    width:calc(100% - 68px);
    border-top:2px dashed #b9cdea
  }
}