:root {
  --sura-header-bg: rgba(0,0,0,0.84);
  --sura-header-border: rgba(255,174,66,0.55);
  --sura-header-radius: 20px;
  --sura-btn-cyan: #00f7ff;
  --sura-btn-pink: #ff00d4;
  --sura-btn-green: #1cff4f;
  --sura-btn-purple: #8a2bff;
  --sura-btn-white: #ffffff;
  --sura-btn-orange: #ff9d00;
}

html { scroll-padding-top: 150px !important; }
body { padding-top: 0 !important; }

body #mainHeader.neon-header {
  position: fixed !important;
  top: 10px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(96%, 1400px) !important;
  z-index: 2147483647 !important;
  margin: 0 !important;
  padding: 18px 0 !important;
  border-radius: var(--sura-header-radius) !important;
  background: var(--sura-header-bg) !important;
  border: 2px solid var(--sura-header-border) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  box-shadow: 0 0 25px rgba(255,174,66,0.35), 0 10px 30px rgba(0,0,0,0.35) !important;
  overflow: visible !important;
  isolation: isolate !important;
}

body #mainHeader.neon-header::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--sura-header-radius) + 2px);
  pointer-events: none;
  background: linear-gradient(90deg, #ff9f1c, #ffe66d, #6fffe9, #4ea8de, #c77dff, #ff9f1c);
  background-size: 300% 100%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 2px;
  animation: suraBorderShift 8s linear infinite;
  opacity: .95;
}

@keyframes suraBorderShift {
  0% { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

body #mainHeader.neon-header.is-shrunk {
  top: 6px !important;
  padding: 10px 0 !important;
  box-shadow: 0 0 18px rgba(255,174,66,0.25), 0 8px 24px rgba(0,0,0,0.42) !important;
}

body #mainHeader.neon-header .sura-nav-center {
  display:grid !important;
  grid-template-columns:48px 1fr 48px !important;
  align-items:center !important;
  position:relative !important;
  gap:14px !important;
  width:min(100%, 1320px) !important;
  margin:0 auto !important;
  padding:0 18px !important;
}

body #mainHeader.neon-header .logo-spacer { width:48px !important; height:48px !important; }
body #mainHeader.neon-header .logo-area { display:flex !important; justify-content:center !important; align-items:center !important; text-align:center !important; width:100% !important; min-width:0; }
body #mainHeader.neon-header .logo-link { display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:12px !important; text-decoration:none !important; color:#fff !important; max-width:100% !important; }
body #mainHeader.neon-header .logo-link img { width:42px !important; height:42px !important; object-fit:contain !important; flex:0 0 auto !important; filter: drop-shadow(0 0 10px rgba(255,174,66,.35)) !important; }
body #mainHeader.neon-header .logo-link h1 { margin:0 !important; font-size:1.12rem !important; text-align:center !important; white-space:nowrap !important; color:#fff !important; text-shadow:0 0 10px rgba(255,174,66,.6) !important; }

body #mainHeader.neon-header .menu-toggle {
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  align-items:center !important;
  width:48px !important;
  height:48px !important;
  margin:0 !important;
  padding:0 !important;
  border:2px solid rgba(255,255,255,.7) !important;
  border-radius:14px !important;
  background:rgba(0,0,0,.88) !important;
  box-shadow:0 0 12px rgba(255,255,255,.28),0 0 18px rgba(255,174,66,.18) !important;
  cursor:pointer !important;
  position:relative !important;
  z-index:2147483647 !important;
  justify-self:end !important;
  -webkit-appearance:none;
  appearance:none;
}
body #mainHeader.neon-header .menu-toggle span { display:block !important; width:24px !important; height:3px !important; margin:3px 0 !important; background:#fff !important; border-radius:999px !important; box-shadow:0 0 10px rgba(255,255,255,.95) !important; transition: transform .25s ease, opacity .25s ease !important; }

body #mainHeader.neon-header .neon-nav {
  display:none !important;
  position:absolute !important;
  top:calc(100% + 12px) !important;
  right:18px !important;
  left:auto !important;
  width:min(340px, 92vw) !important;
  max-height:none !important;
  padding:18px !important;
  border:2px solid rgba(255,174,66,.45) !important;
  border-radius:18px !important;
  background:rgba(0,0,0,.96) !important;
  box-shadow:0 14px 40px rgba(0,0,0,.55), 0 0 18px rgba(255,174,66,.16) !important;
  opacity:0 !important;
  transform:translateY(-10px) scale(.98) !important;
  pointer-events:none !important;
  visibility:hidden !important;
  overflow:visible !important;
  transition: opacity .25s ease, transform .25s ease !important;
}
body #mainHeader.neon-header.active .neon-nav {
  display:block !important;
  opacity:1 !important;
  transform:translateY(0) scale(1) !important;
  pointer-events:auto !important;
  visibility:visible !important;
}
body #mainHeader.neon-header.active .menu-toggle span:nth-child(1) { transform:translateY(9px) rotate(45deg) !important; }
body #mainHeader.neon-header.active .menu-toggle span:nth-child(2) { opacity:0 !important; }
body #mainHeader.neon-header.active .menu-toggle span:nth-child(3) { transform:translateY(-9px) rotate(-45deg) !important; }

body #mainHeader.neon-header .neon-nav ul { display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:12px !important; width:100% !important; margin:0 !important; padding:0 !important; list-style:none !important; }
body #mainHeader.neon-header .neon-nav li { width:100% !important; margin:0 !important; }

body #mainHeader.neon-header .neon-nav a.neon-btn {
  display:block !important;
  width:100% !important;
  text-align:center !important;
  padding:11px 16px !important;
  border-radius:999px !important;
  font-weight:700 !important;
  letter-spacing:.02em !important;
  color:#ffffff !important;
  background:rgba(0,0,0,.92) !important;
  border:2px solid rgba(255,255,255,.35) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), 0 0 12px rgba(255,255,255,.14) !important;
  text-decoration:none !important;
  text-shadow:0 0 12px rgba(255,255,255,.56) !important;
  opacity:1 !important;
  filter:none !important;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease, text-shadow .18s ease !important;
}
body #mainHeader.neon-header .neon-nav a.neon-btn:hover {
  transform:translateY(-2px) scale(1.02) !important;
  filter:none !important;
  opacity:1 !important;
}

body #mainHeader.neon-header .cyan { border-color:var(--sura-btn-cyan) !important; background:rgba(0,247,255,.12) !important; box-shadow:inset 0 0 16px rgba(0,247,255,.14), 0 0 18px rgba(0,247,255,.52), 0 0 30px rgba(0,247,255,.20) !important; }
body #mainHeader.neon-header .pink { border-color:var(--sura-btn-pink) !important; background:rgba(255,0,212,.12) !important; box-shadow:inset 0 0 16px rgba(255,0,212,.14), 0 0 18px rgba(255,0,212,.46), 0 0 30px rgba(255,0,212,.20) !important; }
body #mainHeader.neon-header .green { border-color:var(--sura-btn-green) !important; background:rgba(28,255,79,.12) !important; box-shadow:inset 0 0 16px rgba(28,255,79,.14), 0 0 18px rgba(28,255,79,.46), 0 0 30px rgba(28,255,79,.20) !important; }
body #mainHeader.neon-header .purple { border-color:var(--sura-btn-purple) !important; background:rgba(138,43,255,.12) !important; box-shadow:inset 0 0 16px rgba(138,43,255,.14), 0 0 18px rgba(138,43,255,.50), 0 0 30px rgba(138,43,255,.20) !important; }
body #mainHeader.neon-header .yellow { border-color:var(--sura-btn-white) !important; background:rgba(255,255,255,.09) !important; box-shadow:inset 0 0 16px rgba(255,255,255,.08), 0 0 18px rgba(255,255,255,.56), 0 0 30px rgba(255,255,255,.16) !important; color:#ffffff !important; }
body #mainHeader.neon-header .orange { border-color:var(--sura-btn-orange) !important; background:rgba(255,157,0,.12) !important; box-shadow:inset 0 0 16px rgba(255,157,0,.14), 0 0 18px rgba(255,157,0,.52), 0 0 30px rgba(255,157,0,.20) !important; }
body #mainHeader.neon-header .active-blog { background:rgba(255,255,255,.10) !important; }

body #mainHeader.neon-header .cyan:hover { box-shadow:inset 0 0 20px rgba(0,247,255,.16), 0 0 20px rgba(0,247,255,.62), 0 0 36px rgba(0,247,255,.30) !important; }
body #mainHeader.neon-header .pink:hover { box-shadow:inset 0 0 20px rgba(255,0,212,.16), 0 0 20px rgba(255,0,212,.58), 0 0 36px rgba(255,0,212,.28) !important; }
body #mainHeader.neon-header .green:hover { box-shadow:inset 0 0 20px rgba(28,255,79,.16), 0 0 20px rgba(28,255,79,.58), 0 0 36px rgba(28,255,79,.28) !important; }
body #mainHeader.neon-header .purple:hover { box-shadow:inset 0 0 20px rgba(138,43,255,.16), 0 0 20px rgba(138,43,255,.62), 0 0 36px rgba(138,43,255,.30) !important; }
body #mainHeader.neon-header .yellow:hover { box-shadow:inset 0 0 20px rgba(255,255,255,.10), 0 0 20px rgba(255,255,255,.64), 0 0 36px rgba(255,255,255,.24) !important; }
body #mainHeader.neon-header .orange:hover { box-shadow:inset 0 0 20px rgba(255,157,0,.16), 0 0 20px rgba(255,157,0,.62), 0 0 36px rgba(255,157,0,.30) !important; }

#home, #about, #courses, #pricing, #contact { scroll-margin-top: 170px !important; }

@media (max-width: 900px) {
  body #mainHeader.neon-header { width:min(96%,980px) !important; }
  body #mainHeader.neon-header .sura-nav-center { grid-template-columns:44px 1fr 46px !important; gap:10px !important; }
  body #mainHeader.neon-header .logo-spacer { width:44px !important; height:44px !important; }
  body #mainHeader.neon-header .logo-link { gap:8px !important; }
  body #mainHeader.neon-header .logo-link img { width:36px !important; height:36px !important; }
  body #mainHeader.neon-header .logo-link h1 { font-size:.96rem !important; }
}

@media (max-width: 560px) {
  body #mainHeader.neon-header .logo-link h1 { font-size:.84rem !important; }
  body #mainHeader.neon-header .menu-toggle { width:46px !important; height:46px !important; }
  body #mainHeader.neon-header .neon-nav { right:8px !important; width:min(92vw,340px) !important; }
}