:root{
  --bg:#0a0c0a;
  --accent:#39d642;
  --text:#e8ece8;
  --text-dim:#9aa39a;
  --border:#1c211c;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  background:#050605;
  font-family:'Helvetica Neue',Arial,sans-serif;
}

nav{
  background:var(--bg);
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 40px;
  height:76px;
  position:sticky;
  top:0;
  z-index:100;
}

/* LOGO */
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  flex-shrink:0;
}
.logo-mark{
  width:52px;
  height:52px;
  position:relative;
  flex-shrink:0;
}
.logo-mark img{width:100%;height:100%;display:block;object-fit:contain;}
.logo-text{
  display:flex;
  flex-direction:column;
  line-height:1;
}
.logo-text .top{
  font-size:16px;
  font-weight:700;
  letter-spacing:2px;
  color:var(--text);
  text-transform:uppercase;
}
.logo-text .top span{color:var(--accent);}
.logo-text .bottom{
  font-size:9px;
  letter-spacing:3px;
  color:var(--text-dim);
  text-transform:uppercase;
  margin-top:3px;
}

/* MENU */
ul.menu{
  display:flex;
  align-items:center;
  gap:18px;
  list-style:none;
}
ul.menu > li{
  position:relative;
}
ul.menu > li > a{
  color:var(--text);
  text-decoration:none;
  font-size:13px;
  font-weight:600;
  letter-spacing:1.5px;
  text-transform:uppercase;
  padding:28px 9px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  transition:color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
ul.menu > li > a:hover,
ul.menu > li.active > a{
  color:var(--accent);
}
ul.menu > li > a:hover{
  background:rgba(57,214,66,.06);
  box-shadow:
    inset 0 0 0 1px rgba(57,214,66,.35),
    0 8px 20px -8px rgba(57,214,66,.4);
}
ul.menu > li.active > a{position:relative;}
ul.menu > li.active > a::after{
  content:"";
  position:absolute;
  left:14px; right:14px; bottom:22px;
  height:2px;
  background:var(--accent);
  border-radius:2px;
}

.caret{
  width:9px;height:9px;
  border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;
  transform:rotate(45deg);
  margin-top:-3px;
  transition:transform .2s ease;
}
li.has-sub:hover .caret{transform:rotate(225deg);margin-top:3px;}

/* SUBMENU (level 1) */
.submenu{
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(8px);
  min-width:260px;
  background:#0d100d;
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px;
  opacity:0;
  visibility:hidden;
  transition:opacity .18s ease, transform .18s ease;
  box-shadow:0 20px 40px rgba(0,0,0,.5);
  z-index:20;
}
/* Hover-reveal is a desktop-only interaction; on mobile the submenu is a
   static full-width accordion controlled purely by the JS .open toggle,
   so keeping this under a min-width query prevents any stray :hover
   match (trackpads, hybrid devices, etc.) from showing or repositioning
   it outside of that click-driven state. */
@media (min-width:901px){
  li.has-sub:hover .submenu{
    opacity:1;
    visibility:visible;
    transform:translateX(-50%) translateY(4px);
  }
}
.submenu a{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:10px 14px;
  border-radius:6px;
  text-decoration:none;
  color:var(--text);
  transition:background .15s ease;
}
.submenu a:hover{background:rgba(57,214,66,.08);}
.submenu a .s-title{
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--text);
}
.submenu a:hover .s-title{color:var(--accent);}
.submenu a .s-desc{
  font-size:11px;
  color:var(--text-dim);
  text-transform:none;
  letter-spacing:.2px;
}
.submenu-divider{
  height:1px;
  background:var(--border);
  margin:6px 4px;
}

/* SUBMENU (level 2 — cascading flyout, e.g. Services > Compliance) */
.has-flyout{
  position:relative;
}
.flyout-trigger{
  flex-direction:row !important;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.flyout-trigger-text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.flyout-caret{
  font-size:17px;
  line-height:1;
  color:var(--text-dim);
  transition:transform .2s ease, color .2s ease;
  flex-shrink:0;
}
.has-flyout:hover .flyout-caret,
.has-flyout.open .flyout-caret{
  color:var(--accent);
}

.flyout-submenu{
  position:absolute;
  top:0;
  left:100%;
  margin-left:6px;
  min-width:230px;
  background:#0d100d;
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform:translateX(-6px);
  transition:opacity .18s ease, transform .18s ease;
  box-shadow:0 20px 40px rgba(0,0,0,.5);
  z-index:25;
}
@media (min-width:901px){
  .has-flyout:hover .flyout-submenu{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
  }
  .has-flyout:hover .flyout-caret{ transform:translateX(2px); }
}

/* HAMBURGER (hidden on desktop) */
.burger{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:32px;
  height:32px;
  background:none;
  border:none;
  cursor:pointer;
  padding:0;
  flex-shrink:0;
}
.burger span{
  display:block;
  height:2px;
  width:100%;
  background:var(--text);
  border-radius:2px;
  transition:transform .25s ease, opacity .2s ease;
}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.overlay{
  display:none;
}
.menu-close{
  display:none;
}

/* ===== RESPONSIVE (nav only) ===== */
@media (max-width:900px){

  nav{padding:0 20px;height:64px;}
  .logo-mark{width:42px;height:42px;}

  .burger{display:flex;}

  ul.menu{
    position:fixed;
    top:64px;
    left:0;
    right:0;
    bottom:0;
    background:var(--bg);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:8px 0 24px;
    overflow-y:auto;
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:50;
  }
  ul.menu.open{transform:translateX(0);}

  .menu-close{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    padding:4px 20px 12px;
  }
  .menu-close button{
    width:36px;
    height:36px;
    background:none;
    border:1px solid var(--border);
    border-radius:8px;
    cursor:pointer;
    position:relative;
  }
  .menu-close button span{
    position:absolute;
    top:50%; left:50%;
    width:16px;
    height:2px;
    background:var(--text);
    border-radius:2px;
  }
  .menu-close button span:first-child{transform:translate(-50%,-50%) rotate(45deg);}
  .menu-close button span:last-child{transform:translate(-50%,-50%) rotate(-45deg);}
  .menu-close button:hover span{background:var(--accent);}

  ul.menu > li{width:100%;}
  ul.menu > li > a{
    width:100%;
    padding:16px 24px;
    justify-content:space-between;
    border-bottom:1px solid var(--border);
  }
  ul.menu > li.active > a::after{display:none;}
  ul.menu > li.active > a{background:rgba(57,214,66,.06);}

  .caret{margin-top:0;}
  li.has-sub.open .caret{transform:rotate(225deg);}

  /* submenu becomes inline accordion */
  .submenu{
    position:static;
    transform:none;
    opacity:1;
    visibility:visible;
    display:none;
    min-width:0;
    width:100%;
    border:none;
    border-radius:0;
    background:#070907;
    box-shadow:none;
    padding:0;
  }
  li.has-sub.open .submenu{display:block;}
  .submenu a{
    padding:14px 24px 14px 40px;
    border-radius:0;
    border-bottom:1px solid var(--border);
  }

  /* nested flyout becomes a second-level accordion, indented further */
  .flyout-trigger{
    padding-right:24px;
  }
  .flyout-caret{ transform:rotate(90deg); }
  .has-flyout.open .flyout-caret{ transform:rotate(-90deg); }
  .flyout-submenu{
    position:static;
    left:auto;
    top:auto;
    margin-left:0;
    transform:none;
    opacity:1;
    visibility:visible;
    display:none;
    min-width:0;
    width:100%;
    border:none;
    border-radius:0;
    background:#050705;
    box-shadow:none;
    padding:0;
  }
  .has-flyout.open .flyout-submenu{display:block;}
  .flyout-submenu a{
    padding:14px 24px 14px 56px;
  }

  .overlay{
    display:block;
    position:fixed;
    inset:0;
    top:64px;
    background:rgba(0,0,0,.5);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s ease;
    z-index:40;
  }
  .overlay.open{opacity:1;pointer-events:auto;}
}

@media (max-width:420px){
  .logo-text .bottom{display:none;}
}

/* get in touch button */
/*.myButton {
	box-shadow: 0px 1px 0px 0px #fff6af;
	background:linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
	background-color:#ffec64;
	border-radius:15px;
	border:2px solid #ffaa22;
	display:inline-block;
	cursor:pointer;
	color:#333333;
	font-family:Arial;
	font-size:16px;
	font-weight:bold;
	padding:9px 20px;
	text-decoration:none;
	text-shadow:0px 1px 17px #ffee66;
}
.myButton:hover {
	background:linear-gradient(to bottom, #ffab23 5%, #ffec64 100%);
	background-color:#ffab23;
}
.myButton:active {
	position:relative;
	top:1px;
}*/

/* 3d button */
.button-3d {
  font: 16px 500 Arial, sans-serif;
  color: darkblue;
  background-color: #ffec64;
  
  border-radius: 20px;
  outline: none;
  padding: 15px 30px;
    
  cursor: pointer;
  box-shadow: 0px 8px 0px 0px #3A833D;
  transition: all 0.3s ease-out;
  transform: translateY(0px) translatex(0px);
}

.button-3d:hover {
  border: 0px solid #3d8b40;
  box-shadow: 0px 10px 0px 0px #3d8b40;
      /* background-color: #4CAF50; */
      background-color: #ffec64;

  transform: translateY(-2px) translateX(0px);
  font: 21px 500 Arial, sans-serif;
}

.button-3d:active {
  border: 0px solid #357a38;
  box-shadow: 0px 0px 0px 0px #357a38;
  background-color: #3d8b40;
  font: 21px 500 Arial, sans-serif;

  transform: translateY(10px) translateX(0px);
}

/* get in touch button */
.getbt{
  position: relative;
  background: #333;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 4px 6px;
  font-weight: 500;
  transition: all 0.3s ease;
  overflow: visible;
  box-shadow: 0 0 0 0 rgba(66, 220, 219, 0);
}

.getbt:hover {
  color: #fff;
  background: #222;
  transform: translateY(-3px);
  box-shadow: 
    0 0 10px 3px rgba(66, 220, 219, 0.7),
    0 0 15px 6px rgba(66, 220, 219, 0.4),
    0 0 25px 10px rgba(66, 220, 219, 0.1);
  animation: neon-pulse 1.5s infinite alternate;
}

@keyframes neon-pulse {
  0% {
    box-shadow: 
      0 0 10px 3px rgba(66, 220, 219, 0.7),
      0 0 15px 6px rgba(66, 220, 219, 0.4),
      0 0 25px 10px rgba(66, 220, 219, 0.1);
  }
  100% {
    box-shadow: 
      0 0 15px 5px rgba(66, 220, 219, 0.8),
      0 0 25px 10px rgba(66, 220, 219, 0.5),
      0 0 35px 15px rgba(66, 220, 219, 0.2);
  }
}

.getbt:active {
  transform: translateY(-1px);
  box-shadow: 
    0 0 8px 2px rgba(66, 220, 219, 0.6),
    0 0 12px 5px rgba(66, 220, 219, 0.3),
    0 0 20px 8px rgba(66, 220, 219, 0.1);
}