/* =========================================================
   IOSOFTS — SHARED SITE HEADER + FOOTER
   Namespaced with ioh-/iof- so it never collides with any
   page's own styles. Header inner content is capped at 1280px.
   ========================================================= */
.ioh-header{
  position:sticky;
  top:0;
  z-index:999;
  isolation:isolate;
  border-bottom:1px solid rgba(7,20,29,.10);
  font-family:"DM Sans",system-ui,sans-serif;
}

.ioh-header:before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:rgba(247,250,252,.92);
  backdrop-filter:blur(18px) saturate(1.2);
  -webkit-backdrop-filter:blur(18px) saturate(1.2);
}

.ioh-wrap{
  max-width:1280px;
  width:calc(100% - 48px);
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:78px;
  gap:24px;
}

.ioh-logo{
  display:flex;
  align-items:center;
  flex:0 0 auto;
}

.ioh-logo img{
  width:140px;
  height:auto;
  display:block;
}

.ioh-nav{
  display:flex;
  align-items:center;
  gap:26px;
  flex:1;
  justify-content:center;
  font-size:13px;
  color:#60768a;
}

.ioh-nav a{
  position:relative;
  padding:6px 0;
  color:#5c7284;
  text-decoration:none;
  font-weight:500;
  white-space:nowrap;
  transition:color .2s ease;
}

.ioh-nav a:after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;
  height:1px;
  background:#087fbd;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}

.ioh-nav a:hover{color:#07141d}

.ioh-nav a:hover:after{transform:scaleX(1)}

.ioh-nav a.is-active{color:#07141d;font-weight:700}

.ioh-nav a.is-active:after{transform:scaleX(1)}

.ioh-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.ioh-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:44px;
  padding:0 18px;
  border-radius:9px;
  border:1px solid #07141d;
  font-family:"DM Sans",sans-serif;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
  transition:transform .2s ease,background .2s ease,color .2s ease;
  white-space:nowrap;
}

.ioh-btn:hover{transform:translateY(-2px)}

.ioh-btn:focus{outline:none}

.ioh-btn:focus-visible{outline:2px solid #087fbd;outline-offset:2px}

.ioh-btn-dark{background:#07141d;border-color:#07141d;color:#fff;box-shadow:0 10px 25px rgba(7,20,29,.15)}

.ioh-btn-dark:hover{background:#087fbd;border-color:#087fbd}

.ioh-menu-toggle{
  display:none;
  position:relative;
  flex-direction:column;
  gap:5px;
  width:38px;
  height:38px;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(7,20,29,.15);
  border-radius:9px;
  background:#fff;
  cursor:pointer;
  flex:0 0 auto;
  transition:background .2s ease,border-color .2s ease;
}

.ioh-menu-toggle:hover{border-color:rgba(7,20,29,.3)}

.ioh-menu-toggle span{
  display:block;
  width:17px;
  height:1.5px;
  background:#07141d;
  border-radius:1px;
  transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .2s ease,width .2s ease;
}

.ioh-menu-toggle.is-open{background:#07141d;border-color:#07141d}

.ioh-menu-toggle.is-open span{background:#fff}

.ioh-menu-toggle.is-open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}

.ioh-menu-toggle.is-open span:nth-child(2){opacity:0;width:0}

.ioh-menu-toggle.is-open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

body.ioh-lock{overflow:hidden}

.ioh-mobile-panel{
  display:flex;
  flex-direction:column;
  position:fixed;
  inset:78px 0 0 0;
  background:#fff;
  z-index:998;
  padding:10px 28px 32px;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-10px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
  counter-reset:iohnav;
}

.ioh-mobile-panel.is-open{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0)}

.ioh-mobile-panel a{
  display:flex;
  align-items:center;
  gap:14px;
  padding:16px 2px;
  border-bottom:1px solid rgba(7,20,29,.08);
  color:#07141d;
  text-decoration:none;
  font:600 17px "DM Sans",sans-serif;
  letter-spacing:-.01em;
}

.ioh-mobile-panel a:not(.ioh-btn):before{
  counter-increment:iohnav;
  content:counter(iohnav,decimal-leading-zero);
  font:500 10px "IBM Plex Mono",monospace;
  letter-spacing:.06em;
  color:#9db3bd;
  flex:0 0 auto;
}

.ioh-mobile-panel a.is-active{color:#087fbd}

.ioh-mobile-panel a.is-active:before{color:#087fbd}

.ioh-mobile-panel .ioh-btn{width:100%;margin-top:22px;min-height:52px;font-size:14px;color:#ffffff;}

@media(max-width:940px){
.ioh-nav{display:none}
.ioh-menu-toggle{display:flex}
}

@media(max-width:560px){
.ioh-wrap{height:64px;width:calc(100% - 32px)}
.ioh-logo img{width:118px}
.ioh-mobile-panel{inset:64px 0 0 0;padding:6px 24px 28px}
.ioh-mobile-panel a{font-size:16px;padding:14px 2px}
}

/* FOOTER */
.iof-footer{
  background:#fff;
  border-top:1px solid rgba(7,20,29,.10);
  padding:56px 0 22px;
  font-family:"DM Sans",system-ui,sans-serif;
  color:#07141d;
}

.iof-wrap{
  max-width:1280px;
  width:calc(100% - 48px);
  margin:0 auto;
}

.iof-grid{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;
  gap:32px;
}

.iof-brand img{width:130px;margin-bottom:14px;display:block}

.iof-brand p{
  max-width:280px;
  color:#7b90a2;
  font-size:12.5px;
  line-height:1.7;
  margin:0;
}

.iof-col h5{
  font:600 10px "IBM Plex Mono",monospace;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#263e51;
  margin:0 0 14px;
}

.iof-col ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}

.iof-col a,.iof-col span{font-size:12.5px;color:#74899a;text-decoration:none}

.iof-col a:hover{color:#087fbd}

.iof-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  border-top:1px solid rgba(7,20,29,.10);
  margin-top:38px;
  padding-top:18px;
  font:500 11px "IBM Plex Mono",monospace;
  color:#8aa0af;
}

.iof-social{display:flex;gap:16px}

.iof-social a{color:#74899a;text-decoration:none}

.iof-social a:hover{color:#087fbd}

@media(max-width:900px){
.iof-grid{grid-template-columns:1fr 1fr;row-gap:28px}
.iof-brand{grid-column:1/-1}
}

@media(max-width:560px){
.iof-wrap{width:calc(100% - 32px)}
.iof-footer{padding:44px 0 20px}
.iof-bottom{display:block}
.iof-social{margin-top:10px}
}