/* =========================================================
   FlowSync Global Navigation
   Fresh clean version: nav, brand, links, toggle, cursor,
   back-to-top, selection, and image-drag protection only.
========================================================= */

:root {
  --fs-nav-bg: rgba(255, 253, 244, 0.82);
  --fs-nav-bg-solid: #f5f3e5;
  --fs-nav-bg-dark: rgba(24, 18, 34, 0.9);
  --fs-nav-bg-dark-solid: #17121f;
  --fs-nav-ink: #101010;
  --fs-nav-ink-dark: #fff3dc;
  --fs-nav-line: #111111;
  --fs-nav-line-dark: rgba(255, 243, 220, 0.78);
  --fs-nav-shadow: 0 12px 28px rgba(17, 17, 17, 0.1);
  --fs-nav-shadow-dark: 0 18px 44px rgba(0, 0, 0, 0.34);
  --fs-nav-accent: #e5a5e9;
  --fs-nav-accent-soft: rgba(229, 165, 233, 0.38);
  --fs-nav-width: 1168px;
  --fs-toggle-size: 30px;
  --fs-toggle-icon: 14px;
  --fs-toggle-cut: var(--fs-nav-bg-solid);
}

html[data-theme="dark"],
body.dark {
  --fs-toggle-cut: var(--fs-nav-bg-dark-solid);
}

body.page-home {
  --fs-nav-accent: #e5a5e9;
  --fs-nav-accent-soft: rgba(229, 165, 233, 0.42);
}
body.page-automation,
body.automation-service-body,
body.pricing-automation {
  --fs-nav-accent: #b79cff;
  --fs-nav-accent-soft: rgba(183, 156, 255, 0.36);
}
body.page-web,
body.web-dev-service-body,
body.pricing-web,
body:has(.web-word) {
  --fs-nav-accent: #8df5b5;
  --fs-nav-accent-soft: rgba(141, 245, 181, 0.36);
}
body.page-seo,
body.local-seo-body,
body.pricing-gmb {
  --fs-nav-accent: #76bdff;
  --fs-nav-accent-soft: rgba(118, 189, 255, 0.36);
}
body.page-cyber,
body.cyber-page-body {
  --fs-nav-accent: #5be0c2;
  --fs-nav-accent-soft: rgba(91, 224, 194, 0.34);
}
body.page-services,
body.service-hub-page,
body.page-uiux,
body.pricing-uiux {
  --fs-nav-accent: #8a68f0;
  --fs-nav-accent-soft: rgba(138, 104, 240, 0.34);
}
body.blog-page,
body.blog-article,
body:has(.blog-detail-nav),
body.contact-page,
body.page-contact {
  --fs-nav-accent: #f06a34;
  --fs-nav-accent-soft: rgba(240, 106, 52, 0.3);
}
body.vault-page,
body.page-vault,
body:has(.project-vault),
body:has(.project-global-nav) {
  --fs-nav-accent: #7ce6af;
  --fs-nav-accent-soft: rgba(124, 230, 175, 0.34);
}

/* -------------------------
   Shared nav shell
------------------------- */
.site-nav,
.automation-service-nav,
.web-dev-nav,
.local-seo-nav,
.cyber-nav,
.uiux-service-nav,
.service-hub-nav,
.blog-nav,
.contact-nav,
.project-page-nav,
.vault-project-nav,
.pricing-nav,
.project-global-nav,
.nav.blog-detail-nav,
.nav-wrap .nav,
body.page-uiux .side {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 18px !important;
  width: min(var(--fs-nav-width), calc(100% - 32px)) !important;
  min-height: 64px !important;
  margin-inline: auto !important;
  padding: 10px 14px !important;
  border: 2px solid var(--fs-nav-line) !important;
  border-radius: 14px !important;
  background: var(--fs-nav-bg) !important;
  box-shadow: var(--fs-nav-shadow) !important;
  color: var(--fs-nav-ink) !important;
  isolation: isolate !important;
}

.automation-service-nav,
.web-dev-nav,
.local-seo-nav,
.cyber-nav,
.uiux-service-nav,
.service-hub-nav,
.blog-nav,
.contact-nav,
.project-page-nav,
.vault-project-nav,
.pricing-nav,
.project-global-nav,
body.page-uiux .side {
  position: sticky !important;
  top: 16px !important;
  z-index: 90 !important;
  margin-top: 16px !important;
  margin-bottom: 26px !important;
}

.nav.blog-detail-nav,
.nav-wrap .nav {
  position: relative !important;
  top: auto !important;
  z-index: 40 !important;
  margin: 0 auto 24px !important;
}
.nav-wrap {
  padding: 18px 0 24px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.nav-wrap .nav {
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

html[data-theme="dark"] .site-nav,
html[data-theme="dark"] .automation-service-nav,
html[data-theme="dark"] .web-dev-nav,
html[data-theme="dark"] .local-seo-nav,
html[data-theme="dark"] .cyber-nav,
html[data-theme="dark"] .uiux-service-nav,
html[data-theme="dark"] .service-hub-nav,
html[data-theme="dark"] .blog-nav,
html[data-theme="dark"] .contact-nav,
html[data-theme="dark"] .project-page-nav,
html[data-theme="dark"] .vault-project-nav,
html[data-theme="dark"] .pricing-nav,
html[data-theme="dark"] .project-global-nav,
html[data-theme="dark"] .nav.blog-detail-nav,
html[data-theme="dark"] .nav-wrap .nav,
html[data-theme="dark"] body.page-uiux .side,
body.dark .nav-wrap .nav,
body.dark .project-global-nav,
body.dark .side {
  border-color: var(--fs-nav-line-dark) !important;
  background: var(--fs-nav-bg-dark) !important;
  box-shadow: var(--fs-nav-shadow-dark) !important;
  color: var(--fs-nav-ink-dark) !important;
}

/* UI/UX page uses side layout in its own CSS; normalize it to top nav. */
body.page-uiux .layout {
  display: block !important;
  min-height: auto !important;
}
body.page-uiux .side {
  height: auto !important;
  max-width: min(var(--fs-nav-width), calc(100% - 32px)) !important;
  flex-direction: row !important;
  overflow: visible !important;
}
body.page-uiux .side > div:first-child {
  display: contents !important;
}
body.page-uiux .side-bottom {
  display: none !important;
}
body.page-uiux .main {
  width: min(var(--fs-nav-width), calc(100% - 32px)) !important;
  margin: 0 auto !important;
}
body.page-uiux .page {
  width: 100% !important;
}

/* Featured project landing page keeps toggle inside its card. */
.project-global-nav {
  display: none !important;
}
.project-vault-page .project-vault {
  margin-top: 34px !important;
}
.project-vault-page .vault-shell {
  position: relative !important;
}
.project-vault-page .vault-card-toggle {
  position: absolute !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 8 !important;
}

/* -------------------------
   Brand/logo
------------------------- */
.site-nav-brand,
.automation-service-brand,
.web-dev-brand,
.local-service-brand,
.cyber-brand,
.uiux-brand,
.service-hub-brand,
.blog-brand,
.contact-brand,
.project-page-brand,
.pricing-brand,
.project-global-brand,
.blog-logo-link,
.nav-wrap .brand {
  grid-column: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: max-content !important;
  color: inherit !important;
  text-decoration: none !important;
}

.site-nav-brand > img,
.automation-service-brand > img,
.web-dev-brand > img,
.local-service-brand > img,
.cyber-brand > img,
.uiux-brand > img,
.service-hub-brand > img,
.blog-brand .blog-logo,
.contact-brand > img,
.project-page-brand > img,
.pricing-brand > img,
.project-global-brand > img,
.blog-logo-link > img,
.nav-wrap .logo-space {
  width: 38px !important;
  height: 38px !important;
  flex: 0 0 38px !important;
  display: grid !important;
  place-items: center !important;
  padding: 3px !important;
  border: 1.5px solid rgba(17, 17, 17, 0.24) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.28) !important;
  object-fit: contain !important;
  overflow: hidden !important;
  box-shadow: none !important;
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease !important;
}

.blog-brand .blog-logo img,
.nav-wrap .logo-space img {
  width: 30px !important;
  height: 30px !important;
  object-fit: contain !important;
}

html[data-theme="dark"] .site-nav-brand > img,
html[data-theme="dark"] .automation-service-brand > img,
html[data-theme="dark"] .web-dev-brand > img,
html[data-theme="dark"] .local-service-brand > img,
html[data-theme="dark"] .cyber-brand > img,
html[data-theme="dark"] .uiux-brand > img,
html[data-theme="dark"] .service-hub-brand > img,
html[data-theme="dark"] .blog-brand .blog-logo,
html[data-theme="dark"] .contact-brand > img,
html[data-theme="dark"] .project-page-brand > img,
html[data-theme="dark"] .pricing-brand > img,
html[data-theme="dark"] .project-global-brand > img,
html[data-theme="dark"] .blog-logo-link > img,
html[data-theme="dark"] .nav-wrap .logo-space,
body.dark .nav-wrap .logo-space {
  border-color: rgba(255, 243, 220, 0.24) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

html[data-theme="dark"] .site-nav-brand > img,
html[data-theme="dark"] .automation-service-brand > img,
html[data-theme="dark"] .web-dev-brand > img,
html[data-theme="dark"] .local-service-brand > img,
html[data-theme="dark"] .cyber-brand > img,
html[data-theme="dark"] .uiux-brand > img,
html[data-theme="dark"] .service-hub-brand > img,
html[data-theme="dark"] .contact-brand > img,
html[data-theme="dark"] .project-page-brand > img,
html[data-theme="dark"] .pricing-brand > img,
html[data-theme="dark"] .project-global-brand > img,
html[data-theme="dark"] .blog-logo-link > img {
  content: url("../assets/icon/brand-logodarkbg.png");
}

html:not([data-theme="dark"]) .site-nav-brand > img,
html:not([data-theme="dark"]) .automation-service-brand > img,
html:not([data-theme="dark"]) .web-dev-brand > img,
html:not([data-theme="dark"]) .local-service-brand > img,
html:not([data-theme="dark"]) .cyber-brand > img,
html:not([data-theme="dark"]) .uiux-brand > img,
html:not([data-theme="dark"]) .service-hub-brand > img,
html:not([data-theme="dark"]) .contact-brand > img,
html:not([data-theme="dark"]) .project-page-brand > img,
html:not([data-theme="dark"]) .pricing-brand > img,
html:not([data-theme="dark"]) .project-global-brand > img,
html:not([data-theme="dark"]) .blog-logo-link > img {
  content: url("../assets/icon/brand-logo.webp");
}

.site-nav-brand:hover > img,
.automation-service-brand:hover > img,
.web-dev-brand:hover > img,
.local-service-brand:hover > img,
.cyber-brand:hover > img,
.uiux-brand:hover > img,
.service-hub-brand:hover > img,
.blog-brand:hover .blog-logo,
.contact-brand:hover > img,
.project-page-brand:hover > img,
.pricing-brand:hover > img,
.project-global-brand:hover > img,
.blog-logo-link:hover > img,
.nav-wrap .brand:hover .logo-space {
  box-shadow: 4px 4px 0 var(--fs-nav-accent-soft) !important;
  transform: rotate(-4deg) translateY(-1px) !important;
}

.site-nav-brand span,
.automation-service-brand span,
.web-dev-brand span,
.local-service-brand span,
.cyber-brand span,
.uiux-brand span,
.service-hub-brand span,
.blog-brand span:last-child,
.contact-brand span,
.project-page-brand span,
.pricing-brand span,
.project-global-brand span,
.blog-logo-copy,
.nav-wrap .brand-text {
  display: grid !important;
  line-height: 1.05 !important;
}

.site-nav-brand strong,
.automation-service-brand strong,
.web-dev-brand strong,
.local-service-brand strong,
.cyber-brand strong,
.uiux-brand strong,
.service-hub-brand strong,
.blog-brand strong,
.contact-brand strong,
.project-page-brand strong,
.pricing-brand strong,
.project-global-brand strong,
.blog-logo-copy strong,
.nav-wrap .brand-text strong {
  color: inherit !important;
  font-size: 0.98rem !important;
  font-weight: 880 !important;
  letter-spacing: -0.02em !important;
}

.site-nav-brand small,
.automation-service-brand small,
.web-dev-brand small,
.local-service-brand small,
.cyber-brand small,
.uiux-brand small,
.service-hub-brand small,
.blog-brand small,
.contact-brand small,
.project-page-brand small,
.pricing-brand small,
.project-global-brand small,
.blog-logo-copy small,
.nav-wrap .brand-text span {
  color: color-mix(in srgb, currentColor 70%, transparent) !important;
  font-size: 0.72rem !important;
  font-weight: 760 !important;
}

/* -------------------------
   Nav links
------------------------- */
.site-nav > nav,
.automation-service-nav > nav,
.web-dev-nav > nav,
.local-seo-nav > nav,
.cyber-nav > nav,
.uiux-service-nav > nav,
.service-hub-nav > nav,
.blog-nav > nav,
.contact-nav > nav,
.project-page-nav > nav,
.vault-project-nav > nav,
.pricing-nav > nav,
.project-global-nav > nav,
.nav.blog-detail-nav > .nav-links,
body.page-uiux .side > nav {
  grid-column: 2 !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(20px, 2.7vw, 40px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.nav-wrap .nav-actions {
  grid-column: 2 / 4 !important;
  justify-self: end !important;
  min-width: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: clamp(20px, 2.7vw, 34px) !important;
  margin: 0 !important;
  padding: 0 !important;
}

.site-nav > nav a,
.automation-service-nav > nav a,
.web-dev-nav > nav a,
.local-seo-nav > nav a,
.cyber-nav > nav a,
.uiux-service-nav > nav a,
.service-hub-nav > nav a,
.blog-nav > nav a,
.contact-nav > nav a,
.project-page-nav > nav a,
.vault-project-nav > nav a,
.pricing-nav > nav a,
.project-global-nav > nav a,
.nav.blog-detail-nav .nav-links a,
.nav-wrap .back-link,
body.page-uiux .side > nav a {
  position: relative !important;
  flex: 0 0 auto !important;
  color: inherit !important;
  font-size: clamp(0.92rem, 1.15vw, 1.04rem) !important;
  font-weight: 850 !important;
  line-height: 1 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
}

.site-nav > nav a::after,
.automation-service-nav > nav a::after,
.web-dev-nav > nav a::after,
.local-seo-nav > nav a::after,
.cyber-nav > nav a::after,
.uiux-service-nav > nav a::after,
.service-hub-nav > nav a::after,
.blog-nav > nav a::after,
.contact-nav > nav a::after,
.project-page-nav > nav a::after,
.vault-project-nav > nav a::after,
.pricing-nav > nav a::after,
.project-global-nav > nav a::after,
.nav.blog-detail-nav .nav-links a::after,
.nav-wrap .back-link::after,
body.page-uiux .side > nav a::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -7px !important;
  width: 28px !important;
  height: 5px !important;
  border-radius: 999px !important;
  background: var(--fs-nav-accent-soft) !important;
  opacity: 0.95 !important;
  transform: translateX(-50%) scaleX(0.72) !important;
  transform-origin: center !important;
  transition:
    width 160ms ease,
    transform 160ms ease,
    background 160ms ease !important;
}

.site-nav > nav a:hover::after,
.site-nav > nav a.is-active::after,
.automation-service-nav > nav a:hover::after,
.automation-service-nav > nav a.is-active::after,
.web-dev-nav > nav a:hover::after,
.web-dev-nav > nav a.is-active::after,
.local-seo-nav > nav a:hover::after,
.local-seo-nav > nav a.is-active::after,
.cyber-nav > nav a:hover::after,
.cyber-nav > nav a.is-active::after,
.uiux-service-nav > nav a:hover::after,
.uiux-service-nav > nav a.is-active::after,
.service-hub-nav > nav a:hover::after,
.service-hub-nav > nav a.is-active::after,
.blog-nav > nav a:hover::after,
.blog-nav > nav a.is-active::after,
.contact-nav > nav a:hover::after,
.contact-nav > nav a.is-active::after,
.project-page-nav > nav a:hover::after,
.project-page-nav > nav a.is-active::after,
.vault-project-nav > nav a:hover::after,
.vault-project-nav > nav a.is-active::after,
.pricing-nav > nav a:hover::after,
.pricing-nav > nav a.is-active::after,
.project-global-nav > nav a:hover::after,
.project-global-nav > nav a.is-active::after,
.nav.blog-detail-nav .nav-links a:hover::after,
.nav.blog-detail-nav .nav-links a.is-active::after,
.nav-wrap .back-link:hover::after,
body.page-uiux .side > nav a:hover::after {
  width: 40px !important;
  background: color-mix(
    in srgb,
    var(--fs-nav-accent) 70%,
    transparent
  ) !important;
  transform: translateX(-50%) scaleX(1) !important;
}

/* -------------------------
   One theme toggle design
------------------------- */
.site-nav > .theme-toggle,
.site-nav > [data-theme-toggle],
.automation-service-nav > .theme-toggle,
.web-dev-nav > .theme-toggle,
.local-seo-nav > .theme-toggle,
.cyber-nav > .theme-toggle,
.uiux-service-nav > .theme-toggle,
.service-hub-nav > .theme-toggle,
.blog-nav .blog-theme-toggle,
.contact-nav > .theme-toggle,
.project-page-nav > .theme-toggle,
.vault-project-nav > .theme-toggle,
.pricing-nav .pricing-theme-toggle,
.project-global-nav > .theme-toggle,
.nav.blog-detail-nav > .nav-actions,
body.page-uiux .uiux-theme-toggle {
  grid-column: 3 !important;
  justify-self: end !important;
}

.theme-toggle,
.blog-theme-toggle,
.pricing-theme-toggle,
.page-theme-toggle,
.contact-theme-toggle,
.project-theme-toggle,
.service-hub-theme-toggle,
.uiux-theme-toggle,
.nav-theme-toggle,
[data-theme-toggle],
#themeToggle {
  position: relative !important;
  display: grid !important;
  place-items: center !important;
  width: var(--fs-toggle-size) !important;
  height: var(--fs-toggle-size) !important;
  min-width: var(--fs-toggle-size) !important;
  min-height: var(--fs-toggle-size) !important;
  flex: 0 0 var(--fs-toggle-size) !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: inherit !important;
  cursor: pointer !important;
  overflow: visible !important;
  appearance: none !important;
  transition:
    transform 180ms ease,
    filter 180ms ease !important;
}

.theme-toggle::before,
.theme-toggle::after,
.blog-theme-toggle::before,
.blog-theme-toggle::after,
.pricing-theme-toggle::before,
.pricing-theme-toggle::after,
.page-theme-toggle::before,
.page-theme-toggle::after,
.contact-theme-toggle::before,
.contact-theme-toggle::after,
.project-theme-toggle::before,
.project-theme-toggle::after,
.service-hub-theme-toggle::before,
.service-hub-theme-toggle::after,
.uiux-theme-toggle::before,
.uiux-theme-toggle::after,
.nav-theme-toggle::before,
.nav-theme-toggle::after,
[data-theme-toggle]::before,
[data-theme-toggle]::after,
#themeToggle::before,
#themeToggle::after {
  display: none !important;
  content: none !important;
}

.theme-toggle:hover,
.blog-theme-toggle:hover,
.pricing-theme-toggle:hover,
.page-theme-toggle:hover,
.contact-theme-toggle:hover,
.project-theme-toggle:hover,
.service-hub-theme-toggle:hover,
.uiux-theme-toggle:hover,
.nav-theme-toggle:hover,
[data-theme-toggle]:hover,
#themeToggle:hover {
  transform: translateY(-1px) scale(1.08) !important;
  filter: drop-shadow(0 0 9px rgba(255, 255, 255, 0.9)) !important;
}

.theme-toggle-text {
  display: none !important;
}

.theme-toggle .theme-toggle-icon,
.blog-theme-toggle .theme-toggle-icon,
.pricing-theme-toggle .theme-toggle-icon,
.page-theme-toggle .theme-toggle-icon,
.contact-theme-toggle .theme-toggle-icon,
.project-theme-toggle .theme-toggle-icon,
.service-hub-theme-toggle .theme-toggle-icon,
.uiux-theme-toggle .theme-toggle-icon,
.nav-theme-toggle .theme-toggle-icon,
[data-theme-toggle] .theme-toggle-icon,
.theme-icon {
  position: relative !important;
  z-index: 1 !important;
  display: block !important;
  width: var(--fs-toggle-icon) !important;
  height: var(--fs-toggle-icon) !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: rotate(0deg) scale(1) !important;
  transition:
    transform 220ms ease,
    width 180ms ease,
    height 180ms ease,
    background 180ms ease !important;
}

.theme-toggle .theme-toggle-icon::before,
.blog-theme-toggle .theme-toggle-icon::before,
.pricing-theme-toggle .theme-toggle-icon::before,
.page-theme-toggle .theme-toggle-icon::before,
.contact-theme-toggle .theme-toggle-icon::before,
.project-theme-toggle .theme-toggle-icon::before,
.service-hub-theme-toggle .theme-toggle-icon::before,
.uiux-theme-toggle .theme-toggle-icon::before,
.nav-theme-toggle .theme-toggle-icon::before,
[data-theme-toggle] .theme-toggle-icon::before,
.theme-icon::before {
  content: "" !important;
  position: absolute !important;
  inset: -8px !important;
  border-radius: 999px !important;
  background: repeating-conic-gradient(
    currentColor 0deg 10deg,
    transparent 10deg 45deg
  ) !important;
  -webkit-mask: radial-gradient(
    circle,
    transparent 0 9px,
    #000 9px 12px,
    transparent 12px
  ) !important;
  mask: radial-gradient(
    circle,
    transparent 0 9px,
    #000 9px 12px,
    transparent 12px
  ) !important;
  opacity: 1 !important;
  transform: rotate(0deg) scale(1) !important;
  transition:
    opacity 180ms ease,
    transform 220ms ease !important;
}

.theme-toggle .theme-toggle-icon::after,
.blog-theme-toggle .theme-toggle-icon::after,
.pricing-theme-toggle .theme-toggle-icon::after,
.page-theme-toggle .theme-toggle-icon::after,
.contact-theme-toggle .theme-toggle-icon::after,
.project-theme-toggle .theme-toggle-icon::after,
.service-hub-theme-toggle .theme-toggle-icon::after,
.uiux-theme-toggle .theme-toggle-icon::after,
.nav-theme-toggle .theme-toggle-icon::after,
[data-theme-toggle] .theme-toggle-icon::after,
.theme-icon::after {
  content: "" !important;
  position: absolute !important;
  display: none !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: var(--fs-toggle-cut) !important;
  transform: translate(36%, -28%) !important;
}

html[data-theme="dark"] .theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .blog-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .pricing-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .page-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .contact-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .project-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .service-hub-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .uiux-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .nav-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] [data-theme-toggle] .theme-toggle-icon,
html[data-theme="dark"] .theme-icon,
body.dark .theme-toggle .theme-toggle-icon,
body.dark [data-theme-toggle] .theme-toggle-icon,
body.dark .theme-icon {
  width: calc(var(--fs-toggle-icon) + 3px) !important;
  height: calc(var(--fs-toggle-icon) + 3px) !important;
  background: currentColor !important;
  transform: rotate(-8deg) scale(1) !important;
}

html[data-theme="dark"] .theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] .blog-theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] .pricing-theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] .page-theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] .contact-theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] .project-theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] .service-hub-theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] .uiux-theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] .nav-theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] [data-theme-toggle] .theme-toggle-icon::before,
html[data-theme="dark"] .theme-icon::before,
body.dark .theme-toggle .theme-toggle-icon::before,
body.dark [data-theme-toggle] .theme-toggle-icon::before,
body.dark .theme-icon::before {
  opacity: 0 !important;
  transform: rotate(80deg) scale(0) !important;
}

html[data-theme="dark"] .theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .blog-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .pricing-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .page-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .contact-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .project-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .service-hub-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .uiux-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .nav-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] [data-theme-toggle] .theme-toggle-icon::after,
html[data-theme="dark"] .theme-icon::after,
body.dark .theme-toggle .theme-toggle-icon::after,
body.dark [data-theme-toggle] .theme-toggle-icon::after,
body.dark .theme-icon::after {
  display: block !important;
}

/* =========================================================
   Fixed Site Texture + Coldboot Watermark
   Shared across every page that loads the global navigation.
========================================================= */

html,
body {
  background-attachment: fixed !important;
}

body {
  background-image: none !important;
  background-color: var(
    --bg,
    var(--page-bg, var(--canvas, var(--surface, #f5f3e5)))
  ) !important;
}

html[data-theme="dark"] body,
html:has(body.dark) body {
  background-color: var(
    --bg,
    var(--page-bg, var(--canvas, var(--surface, #15120f)))
  ) !important;
}

html::before,
html::after {
  content: "";
  position: fixed;
  pointer-events: none;
}

body:not(.is-lab-mode)::before {
  background: none !important;
  background-image: none !important;
}

body.blog-page,
body.blog-article,
body.contact-page,
body.service-hub-page,
body.service-detail-page,
body.automation-service-body,
body.web-dev-service-body,
body.local-seo-body,
body.cyber-page-body,
body.page-uiux,
body.page-services,
body.page-vault,
body.vault-page,
body.project-vault-page,
body.pricing-service-page,
body.pricing-pay-page,
body.utility-page,
body.gallery-page,
body.project-page,
body.page-home,
main#home > .about-section,
main#home > .service-section,
main#home > .feature-section,
main#home > .carousel-section,
.automation-flow-canvas,
.web-window-canvas,
.service-visual-frame,
.visual,
.vault-page,
.project-page,
.utility-page,
.gallery-page {
  background-image: none !important;
}

.hero-img,
.image-box,
.contact-left-card::before,
.os-preview-body,
.number-card,
.automation-workflow-check,
.automation-flow-canvas,
.web-window-canvas,
.service-visual-frame,
.visual,
.local-img-frame,
.memory-pile,
.gallery-wall {
  background-image: none !important;
}

:root:not([data-theme="dark"]) .page-home main#home,
:root:not([data-theme="dark"]) .page-home .about-section,
:root:not([data-theme="dark"]) .page-home .service-section,
:root:not([data-theme="dark"]) .page-home .feature-section,
:root:not([data-theme="dark"]) .page-home .carousel-section {
  background: transparent !important;
}

html::before {
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle, rgba(16, 16, 16, 0.12) 1px, transparent 1.4px);
  background-position: 0 0;
  background-size: 12px 12px;
  opacity: 0.3;
}

html::after {
  top: clamp(30px, 6vh, 90px);
  right: clamp(-200px, -10vw, -62px);
  z-index: 0;
  width: clamp(720px, 58vw, 960px);
  aspect-ratio: 1;
  background: center / contain no-repeat
    url("../assets/icon/coldboot-watermark-black.webp");
  opacity: 0.125;
}

body > * {
  position: relative;
  z-index: 1;
}

html[data-theme="dark"]::before,
html:has(body.dark)::before {
  background-image:
    radial-gradient(circle, rgba(245, 243, 229, 0.16) 1px, transparent 1.4px);
  opacity: 0.32;
}

html[data-theme="dark"]::after,
html:has(body.dark)::after {
  background-image: url("../assets/icon/coldboot-watermark-white.webp");
  opacity: 0.135;
}

@media (max-width: 760px) {
  html::after {
    top: auto;
    right: -68px;
    bottom: -05px;
    width: min(102vw, 505px);
    opacity: 0.095;
  }

  html[data-theme="dark"]::after,
  html:has(body.dark)::after {
    opacity: 0.12;
  }
}

/* =========================================================
   Footer Coldboot Watermark
========================================================= */

.site-footer,
.blog-footer,
.service-site-footer,
.uiux-footer,
.web-dev-footer,
.cyber-footer,
.automation-service-footer,
.local-seo-footer {
  position: relative !important;
  overflow: hidden;
}

.site-footer .footer-brand {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  text-transform: lowercase;
}

.site-footer::after,
.blog-footer::after,
.service-site-footer::after,
.uiux-footer::after,
.web-dev-footer::after,
.cyber-footer::after,
.automation-service-footer::after,
.local-seo-footer::after {
  content: "coldboot" !important;
  position: absolute;
  right: clamp(110px, 13vw, 220px);
  bottom: clamp(34px, 4vw, 62px);
  z-index: 0;
  color: currentColor;
  font-family:
    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    sans-serif;
  font-size: clamp(4.2rem, 8.4vw, 9.4rem);
  font-weight: 800;
  letter-spacing: 0.04em;
  line-height: 0.72;
  opacity: 0.065;
  pointer-events: none;
  text-transform: lowercase;
  user-select: none;
  white-space: nowrap;
}

.site-footer::after {
  right: clamp(28px, 4.5vw, 76px);
  bottom: clamp(58px, 7vw, 118px);
  font-size: clamp(4.2rem, 8vw, 9rem);
}

html[data-theme="dark"] .site-footer::after,
html:has(body.dark) .site-footer::after,
html[data-theme="dark"] .blog-footer::after,
html:has(body.dark) .blog-footer::after,
html[data-theme="dark"] .service-site-footer::after,
html:has(body.dark) .service-site-footer::after,
html[data-theme="dark"] .uiux-footer::after,
html:has(body.dark) .uiux-footer::after,
html[data-theme="dark"] .web-dev-footer::after,
html:has(body.dark) .web-dev-footer::after,
html[data-theme="dark"] .cyber-footer::after,
html:has(body.dark) .cyber-footer::after,
html[data-theme="dark"] .automation-service-footer::after,
html:has(body.dark) .automation-service-footer::after,
html[data-theme="dark"] .local-seo-footer::after,
html:has(body.dark) .local-seo-footer::after {
  opacity: 0.085;
}

.site-footer > *,
.blog-footer > *,
.service-site-footer > *,
.uiux-footer > *,
.web-dev-footer > *,
.cyber-footer > *,
.automation-service-footer > *,
.local-seo-footer > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 760px) {
  .site-footer::after,
  .blog-footer::after,
  .service-site-footer::after,
  .uiux-footer::after,
  .web-dev-footer::after,
  .cyber-footer::after,
  .automation-service-footer::after,
  .local-seo-footer::after {
    right: 18px;
    bottom: 92px;
    font-size: clamp(3rem, 14vw, 5rem);
    letter-spacing: 0.035em;
    opacity: 0.055;
  }

  .site-footer::after {
    right: 20px;
    bottom: 70px;
    font-size: clamp(3.1rem, 15vw, 5.4rem);
  }

  html[data-theme="dark"] .site-footer::after,
  html:has(body.dark) .site-footer::after,
  html[data-theme="dark"] .blog-footer::after,
  html:has(body.dark) .blog-footer::after,
  html[data-theme="dark"] .service-site-footer::after,
  html:has(body.dark) .service-site-footer::after,
  html[data-theme="dark"] .uiux-footer::after,
  html:has(body.dark) .uiux-footer::after,
  html[data-theme="dark"] .web-dev-footer::after,
  html:has(body.dark) .web-dev-footer::after,
  html[data-theme="dark"] .cyber-footer::after,
  html:has(body.dark) .cyber-footer::after,
  html[data-theme="dark"] .automation-service-footer::after,
  html:has(body.dark) .automation-service-footer::after,
  html[data-theme="dark"] .local-seo-footer::after,
  html:has(body.dark) .local-seo-footer::after {
    opacity: 0.07;
  }
}

/* Final visual lock: every theme toggle uses the homepage sun/moon icon. */
.theme-toggle,
.blog-theme-toggle,
.pricing-theme-toggle,
.page-theme-toggle,
.contact-theme-toggle,
.project-theme-toggle,
.service-hub-theme-toggle,
.uiux-theme-toggle,
.nav-theme-toggle,
[data-theme-toggle],
#themeToggle {
  color: #111111 !important;
}

html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .blog-theme-toggle,
html[data-theme="dark"] .pricing-theme-toggle,
html[data-theme="dark"] .page-theme-toggle,
html[data-theme="dark"] .contact-theme-toggle,
html[data-theme="dark"] .project-theme-toggle,
html[data-theme="dark"] .service-hub-theme-toggle,
html[data-theme="dark"] .uiux-theme-toggle,
html[data-theme="dark"] .nav-theme-toggle,
html[data-theme="dark"] [data-theme-toggle],
html[data-theme="dark"] #themeToggle,
body.dark .theme-toggle,
body.dark [data-theme-toggle],
body.dark #themeToggle {
  color: #fff2d8 !important;
}

.theme-toggle .theme-toggle-icon,
.blog-theme-toggle .theme-toggle-icon,
.pricing-theme-toggle .theme-toggle-icon,
.page-theme-toggle .theme-toggle-icon,
.contact-theme-toggle .theme-toggle-icon,
.project-theme-toggle .theme-toggle-icon,
.service-hub-theme-toggle .theme-toggle-icon,
.uiux-theme-toggle .theme-toggle-icon,
.nav-theme-toggle .theme-toggle-icon,
[data-theme-toggle] .theme-toggle-icon,
.theme-icon {
  width: 18px !important;
  height: 18px !important;
  border: 0 !important;
  background: currentColor !important;
}

.theme-toggle .theme-toggle-icon::before,
.blog-theme-toggle .theme-toggle-icon::before,
.pricing-theme-toggle .theme-toggle-icon::before,
.page-theme-toggle .theme-toggle-icon::before,
.contact-theme-toggle .theme-toggle-icon::before,
.project-theme-toggle .theme-toggle-icon::before,
.service-hub-theme-toggle .theme-toggle-icon::before,
.uiux-theme-toggle .theme-toggle-icon::before,
.nav-theme-toggle .theme-toggle-icon::before,
[data-theme-toggle] .theme-toggle-icon::before,
.theme-icon::before {
  inset: -8px !important;
  background: repeating-conic-gradient(
    currentColor 0deg 10deg,
    transparent 10deg 45deg
  ) !important;
  -webkit-mask: radial-gradient(
    circle,
    transparent 0 9px,
    #000 9px 12px,
    transparent 12px
  ) !important;
  mask: radial-gradient(
    circle,
    transparent 0 9px,
    #000 9px 12px,
    transparent 12px
  ) !important;
}

html[data-theme="dark"] .theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .blog-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .pricing-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .page-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .contact-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .project-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .service-hub-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .uiux-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .nav-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] [data-theme-toggle] .theme-toggle-icon,
html[data-theme="dark"] .theme-icon,
body.dark .theme-toggle .theme-toggle-icon,
body.dark [data-theme-toggle] .theme-toggle-icon,
body.dark .theme-icon {
  width: 21px !important;
  height: 21px !important;
  transform: rotate(-8deg) scale(1) !important;
}

html[data-theme="dark"] .theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .blog-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .pricing-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .page-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .contact-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .project-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .service-hub-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .uiux-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .nav-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] [data-theme-toggle] .theme-toggle-icon::after,
html[data-theme="dark"] .theme-icon::after,
body.dark .theme-toggle .theme-toggle-icon::after,
body.dark [data-theme-toggle] .theme-toggle-icon::after,
body.dark .theme-icon::after {
  background: #171021 !important;
  display: block !important;
}

.nav-radar {
  display: none !important;
}

/* -------------------------
   Back-to-top
------------------------- */
.back-top,
.back-to-top,
[data-back-top],
[data-back-to-top] {
  position: fixed !important;
  right: 18px !important;
  bottom: 18px !important;
  z-index: 110 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 46px !important;
  width: auto !important;
  min-height: 38px !important;
  height: 38px !important;
  padding: 0 11px !important;
  border: 2px solid currentColor !important;
  border-radius: 999px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  box-shadow: 5px 5px 0 rgba(17, 17, 17, 0.14) !important;
  color: inherit !important;
  font-size: 0.82rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateY(10px) !important;
  transition:
    opacity 160ms ease,
    transform 160ms ease,
    background 160ms ease !important;
  backdrop-filter: blur(12px) !important;
}
.back-top.is-visible,
.back-to-top.is-visible,
[data-back-top].is-visible,
[data-back-to-top].is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) !important;
}
html[data-theme="dark"] .back-top,
html[data-theme="dark"] .back-to-top,
body.dark .back-top,
body.dark .back-to-top {
  background: rgba(18, 18, 22, 0.78) !important;
  color: var(--fs-nav-ink-dark) !important;
  box-shadow: 5px 5px 0
    color-mix(in srgb, var(--fs-nav-accent) 18%, transparent) !important;
}

/* -------------------------
   Cursor + selection + image safety
------------------------- */
.fs-cursor {
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  z-index: 9999 !important;
  width: 34px !important;
  height: 34px !important;
  border: 1.5px solid currentColor !important;
  border-radius: 50% !important;
  pointer-events: none !important;
  opacity: 0 !important;
  color: var(--fs-nav-ink) !important;
  mix-blend-mode: multiply !important;
  transition:
    opacity 140ms ease,
    width 140ms ease,
    height 140ms ease,
    background 140ms ease,
    border-color 140ms ease !important;
}
.fs-cursor.is-visible {
  opacity: 0.72 !important;
}
.fs-cursor.is-active {
  width: 46px !important;
  height: 46px !important;
  background: color-mix(
    in srgb,
    var(--fs-nav-accent) 22%,
    transparent
  ) !important;
  border-color: color-mix(
    in srgb,
    var(--fs-nav-accent) 68%,
    currentColor
  ) !important;
}
html[data-theme="dark"] .fs-cursor,
body.dark .fs-cursor {
  color: var(--fs-nav-ink-dark) !important;
  mix-blend-mode: screen !important;
}
@media (hover: none), (pointer: coarse) {
  .fs-cursor {
    display: none !important;
  }
}

::selection {
  background: #96f0ff !important;
  color: #101010 !important;
}
::-moz-selection {
  background: #96f0ff !important;
  color: #101010 !important;
}
html[data-theme="dark"] ::selection,
body.dark ::selection {
  background: #c7ff3d !important;
  color: #101010 !important;
}
html[data-theme="dark"] ::-moz-selection,
body.dark ::-moz-selection {
  background: #c7ff3d !important;
  color: #101010 !important;
}

img,
[data-protected-photo],
.intro-photo-frame,
.portrait-frame,
.quote-photo-frame,
.hero-photo-card,
.post-visual,
.project-screen,
.screen-frame {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}
.is-protected-blur {
  animation: protectedBlur 900ms ease both !important;
}
@keyframes protectedBlur {
  0% {
    filter: none;
    transform: scale(1);
  }
  35% {
    filter: blur(7px) saturate(0.72);
    transform: scale(0.985);
  }
  100% {
    filter: none;
    transform: scale(1);
  }
}

/* -------------------------
   Phone/tablet nav
------------------------- */
@media (max-width: 1024px) {
  :root {
    --fs-toggle-size: 24px;
    --fs-toggle-icon: 11px;
  }

  .site-nav,
  .automation-service-nav,
  .web-dev-nav,
  .local-seo-nav,
  .cyber-nav,
  .uiux-service-nav,
  .service-hub-nav,
  .blog-nav,
  .contact-nav,
  .project-page-nav,
  .vault-project-nav,
  .pricing-nav,
  .nav.blog-detail-nav,
  .nav-wrap .nav,
  body.page-uiux .side {
    grid-template-columns: minmax(0, 1fr) auto !important;
    width: calc(100% - 18px) !important;
    min-height: 36px !important;
    padding: 5px 8px !important;
    gap: 10px !important;
    border-radius: 11px !important;
    top: 8px !important;
  }

  .site-nav-brand,
  .automation-service-brand,
  .web-dev-brand,
  .local-service-brand,
  .cyber-brand,
  .uiux-brand,
  .service-hub-brand,
  .blog-brand,
  .contact-brand,
  .project-page-brand,
  .pricing-brand,
  .project-global-brand,
  .blog-logo-link,
  .nav-wrap .brand {
    display: none !important;
  }

  .site-nav > nav,
  .automation-service-nav > nav,
  .web-dev-nav > nav,
  .local-seo-nav > nav,
  .cyber-nav > nav,
  .uiux-service-nav > nav,
  .service-hub-nav > nav,
  .blog-nav > nav,
  .contact-nav > nav,
  .project-page-nav > nav,
  .vault-project-nav > nav,
  .pricing-nav > nav,
  .nav.blog-detail-nav > .nav-links,
  body.page-uiux .side > nav,
  .nav-wrap .nav-actions {
    grid-column: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(34px, 8vw, 58px) !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .site-nav > nav::-webkit-scrollbar,
  .automation-service-nav > nav::-webkit-scrollbar,
  .web-dev-nav > nav::-webkit-scrollbar,
  .local-seo-nav > nav::-webkit-scrollbar,
  .cyber-nav > nav::-webkit-scrollbar,
  .uiux-service-nav > nav::-webkit-scrollbar,
  .service-hub-nav > nav::-webkit-scrollbar,
  .blog-nav > nav::-webkit-scrollbar,
  .contact-nav > nav::-webkit-scrollbar,
  .project-page-nav > nav::-webkit-scrollbar,
  .vault-project-nav > nav::-webkit-scrollbar,
  .pricing-nav > nav::-webkit-scrollbar,
  .nav.blog-detail-nav > .nav-links::-webkit-scrollbar,
  body.page-uiux .side > nav::-webkit-scrollbar {
    display: none !important;
  }

  .site-nav > nav a,
  .automation-service-nav > nav a,
  .web-dev-nav > nav a,
  .local-seo-nav > nav a,
  .cyber-nav > nav a,
  .uiux-service-nav > nav a,
  .service-hub-nav > nav a,
  .blog-nav > nav a,
  .contact-nav > nav a,
  .project-page-nav > nav a,
  .vault-project-nav > nav a,
  .pricing-nav > nav a,
  .nav.blog-detail-nav .nav-links a,
  .nav-wrap .back-link,
  body.page-uiux .side > nav a {
    padding: 6px 0 7px !important;
    font-size: 0.86rem !important;
  }

  .site-nav > nav a::after,
  .automation-service-nav > nav a::after,
  .web-dev-nav > nav a::after,
  .local-seo-nav > nav a::after,
  .cyber-nav > nav a::after,
  .uiux-service-nav > nav a::after,
  .service-hub-nav > nav a::after,
  .blog-nav > nav a::after,
  .contact-nav > nav a::after,
  .project-page-nav > nav a::after,
  .vault-project-nav > nav a::after,
  .pricing-nav > nav a::after,
  .nav.blog-detail-nav .nav-links a::after,
  .nav-wrap .back-link::after,
  body.page-uiux .side > nav a::after {
    bottom: -1px !important;
    width: 26px !important;
    height: 6px !important;
    opacity: 1 !important;
  }

  .theme-toggle,
  .blog-theme-toggle,
  .pricing-theme-toggle,
  .page-theme-toggle,
  .contact-theme-toggle,
  .project-theme-toggle,
  .service-hub-theme-toggle,
  .uiux-theme-toggle,
  .nav-theme-toggle,
  [data-theme-toggle],
  #themeToggle,
  .nav.blog-detail-nav > .nav-actions {
    grid-column: 2 !important;
    justify-self: end !important;
  }

  .nav.blog-detail-nav .nav-btn {
    display: none !important;
  }
}



/* FINAL SERVICE NAV UNDERLINE FIX */
.automation-service-nav nav a,
.local-seo-nav nav a,
.web-dev-nav nav a,
.uiux-service-nav nav a,
.networking-service-nav nav a,
[class*="service-nav"] nav a {
  padding-bottom: 2px !important;
}

.automation-service-nav nav a::after,
.local-seo-nav nav a::after,
.web-dev-nav nav a::after,
.uiux-service-nav nav a::after,
.networking-service-nav nav a::after,
[class*="service-nav"] nav a::after {
  bottom: -2px !important;
  height: 5px !important;
}


/* FINAL INDEX NAV UNDERLINE FIX */
.site-nav nav a {
  padding-bottom: 2px !important;
}

.site-nav nav a::after {
  bottom: -8px !important;
  height: 5px !important;
}



/* FINAL PHONE NAV FIT + UNDERLINE FIX */
@media (max-width: 520px) {
  .site-nav,
  .automation-service-nav,
  .web-dev-nav,
  .local-seo-nav,
  .cyber-nav,
  .uiux-service-nav,
  .service-hub-nav {
    width: calc(100% - 20px) !important;
    grid-template-columns: minmax(0, 1fr) 34px !important;
    gap: 6px !important;
    padding: 7px 7px !important;
  }

  .site-nav > nav,
  .automation-service-nav > nav,
  .web-dev-nav > nav,
  .local-seo-nav > nav,
  .cyber-nav > nav,
  .uiux-service-nav > nav,
  .service-hub-nav > nav {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    justify-content: space-between !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  .site-nav > nav a,
  .automation-service-nav > nav a,
  .web-dev-nav > nav a,
  .local-seo-nav > nav a,
  .cyber-nav > nav a,
  .uiux-service-nav > nav a,
  .service-hub-nav > nav a {
    position: relative !important;
    flex: 0 0 auto !important;
    padding: 7px 0 9px !important;
    font-size: 0.78rem !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .site-nav > nav a::after,
  .automation-service-nav > nav a::after,
  .web-dev-nav > nav a::after,
  .local-seo-nav > nav a::after,
  .cyber-nav > nav a::after,
  .uiux-service-nav > nav a::after,
  .service-hub-nav > nav a::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: 1px !important;
    width: 24px !important;
    height: 5px !important;
    border-radius: 999px !important;
    background: var(--fs-nav-accent-soft, rgba(135, 245, 176, 0.42)) !important;
    opacity: 1 !important;
    transform: translateX(-50%) scaleX(0.78) !important;
  }

  .site-nav > nav a:hover::after,
  .site-nav > nav a:active::after,
  .site-nav > nav a.is-active::after,
  .automation-service-nav > nav a:hover::after,
  .automation-service-nav > nav a:active::after,
  .web-dev-nav > nav a:hover::after,
  .web-dev-nav > nav a:active::after,
  .local-seo-nav > nav a:hover::after,
  .local-seo-nav > nav a:active::after,
  .cyber-nav > nav a:hover::after,
  .cyber-nav > nav a:active::after,
  .uiux-service-nav > nav a:hover::after,
  .uiux-service-nav > nav a:active::after,
  .service-hub-nav > nav a:hover::after,
  .service-hub-nav > nav a:active::after {
    width: 32px !important;
    transform: translateX(-50%) scaleX(1) !important;
  }

  .site-nav .theme-toggle,
  .automation-service-nav .theme-toggle,
  .web-dev-nav .theme-toggle,
  .local-seo-nav .theme-toggle,
  .cyber-nav .theme-toggle,
  .uiux-service-nav .theme-toggle,
  .service-hub-nav .theme-toggle {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    min-height: 32px !important;
  }
}


/* MAIN PHONE NAV UNDERLINE COLOR */
@media (max-width: 760px) {
  html[data-theme="light"] .site-nav nav a::after,
  html[data-theme="light"] .site-nav > nav a::after {
    background: #E5A5E9 !important;
  }

  html[data-theme="dark"] .site-nav nav a::after,
  html[data-theme="dark"] .site-nav > nav a::after {
    background: rgba(168, 119, 255, 0.58) !important;
  }

  html[data-theme="light"] .site-nav nav a:hover::after,
  html[data-theme="light"] .site-nav nav a:active::after,
  html[data-theme="light"] .site-nav nav a.is-active::after,
  html[data-theme="light"] .site-nav > nav a:hover::after,
  html[data-theme="light"] .site-nav > nav a:active::after,
  html[data-theme="light"] .site-nav > nav a.is-active::after {
    background: #E5A5E9 !important;
  }

html[data-theme="dark"] .site-nav nav a:hover::after,
  html[data-theme="dark"] .site-nav nav a:active::after,
  html[data-theme="dark"] .site-nav nav a.is-active::after,
  html[data-theme="dark"] .site-nav > nav a:hover::after,
  html[data-theme="dark"] .site-nav > nav a:active::after,
  html[data-theme="dark"] .site-nav > nav a.is-active::after {
    background: rgba(168, 119, 255, 0.78) !important;
  }
}

/* Absolute final toggle visual: same homepage sun/moon on every page. */
.theme-toggle,
.blog-theme-toggle,
.pricing-theme-toggle,
.page-theme-toggle,
.contact-theme-toggle,
.project-theme-toggle,
.service-hub-theme-toggle,
.uiux-theme-toggle,
.nav-theme-toggle,
[data-theme-toggle],
#themeToggle {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #111111 !important;
}

html[data-theme="dark"] .theme-toggle,
html[data-theme="dark"] .blog-theme-toggle,
html[data-theme="dark"] .pricing-theme-toggle,
html[data-theme="dark"] .page-theme-toggle,
html[data-theme="dark"] .contact-theme-toggle,
html[data-theme="dark"] .project-theme-toggle,
html[data-theme="dark"] .service-hub-theme-toggle,
html[data-theme="dark"] .uiux-theme-toggle,
html[data-theme="dark"] .nav-theme-toggle,
html[data-theme="dark"] [data-theme-toggle],
html[data-theme="dark"] #themeToggle,
body.dark .theme-toggle,
body.dark [data-theme-toggle],
body.dark #themeToggle {
  color: #fff2d8 !important;
}

.theme-toggle .theme-toggle-icon,
.blog-theme-toggle .theme-toggle-icon,
.pricing-theme-toggle .theme-toggle-icon,
.page-theme-toggle .theme-toggle-icon,
.contact-theme-toggle .theme-toggle-icon,
.project-theme-toggle .theme-toggle-icon,
.service-hub-theme-toggle .theme-toggle-icon,
.uiux-theme-toggle .theme-toggle-icon,
.nav-theme-toggle .theme-toggle-icon,
[data-theme-toggle] .theme-toggle-icon,
.theme-icon {
  position: relative !important;
  display: block !important;
  width: 18px !important;
  height: 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: currentColor !important;
  box-shadow: none !important;
  overflow: visible !important;
  transform: rotate(0deg) scale(1) !important;
}

.theme-toggle .theme-toggle-icon::before,
.blog-theme-toggle .theme-toggle-icon::before,
.pricing-theme-toggle .theme-toggle-icon::before,
.page-theme-toggle .theme-toggle-icon::before,
.contact-theme-toggle .theme-toggle-icon::before,
.project-theme-toggle .theme-toggle-icon::before,
.service-hub-theme-toggle .theme-toggle-icon::before,
.uiux-theme-toggle .theme-toggle-icon::before,
.nav-theme-toggle .theme-toggle-icon::before,
[data-theme-toggle] .theme-toggle-icon::before,
.theme-icon::before {
  content: "" !important;
  position: absolute !important;
  inset: -8px !important;
  display: block !important;
  border-radius: 999px !important;
  background: repeating-conic-gradient(
    currentColor 0deg 10deg,
    transparent 10deg 45deg
  ) !important;
  -webkit-mask: radial-gradient(
    circle,
    transparent 0 9px,
    #000 9px 12px,
    transparent 12px
  ) !important;
  mask: radial-gradient(
    circle,
    transparent 0 9px,
    #000 9px 12px,
    transparent 12px
  ) !important;
  opacity: 1 !important;
  transform: rotate(0deg) scale(1) !important;
}

.theme-toggle .theme-toggle-icon::after,
.blog-theme-toggle .theme-toggle-icon::after,
.pricing-theme-toggle .theme-toggle-icon::after,
.page-theme-toggle .theme-toggle-icon::after,
.contact-theme-toggle .theme-toggle-icon::after,
.project-theme-toggle .theme-toggle-icon::after,
.service-hub-theme-toggle .theme-toggle-icon::after,
.uiux-theme-toggle .theme-toggle-icon::after,
.nav-theme-toggle .theme-toggle-icon::after,
[data-theme-toggle] .theme-toggle-icon::after,
.theme-icon::after {
  content: "" !important;
  position: absolute !important;
  display: none !important;
  width: 100% !important;
  height: 100% !important;
  border-radius: 999px !important;
  background: #171021 !important;
  transform: translate(36%, -28%) !important;
}

html[data-theme="dark"] .theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .blog-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .pricing-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .page-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .contact-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .project-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .service-hub-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .uiux-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] .nav-theme-toggle .theme-toggle-icon,
html[data-theme="dark"] [data-theme-toggle] .theme-toggle-icon,
html[data-theme="dark"] .theme-icon,
body.dark .theme-toggle .theme-toggle-icon,
body.dark [data-theme-toggle] .theme-toggle-icon,
body.dark .theme-icon {
  width: 21px !important;
  height: 21px !important;
  background: currentColor !important;
  transform: rotate(-8deg) scale(1) !important;
}

html[data-theme="dark"] .theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] .blog-theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] .pricing-theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] .page-theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] .contact-theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] .project-theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] .service-hub-theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] .uiux-theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] .nav-theme-toggle .theme-toggle-icon::before,
html[data-theme="dark"] [data-theme-toggle] .theme-toggle-icon::before,
html[data-theme="dark"] .theme-icon::before,
body.dark .theme-toggle .theme-toggle-icon::before,
body.dark [data-theme-toggle] .theme-toggle-icon::before,
body.dark .theme-icon::before {
  opacity: 0 !important;
  transform: rotate(80deg) scale(0) !important;
}

html[data-theme="dark"] .theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .blog-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .pricing-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .page-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .contact-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .project-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .service-hub-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .uiux-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] .nav-theme-toggle .theme-toggle-icon::after,
html[data-theme="dark"] [data-theme-toggle] .theme-toggle-icon::after,
html[data-theme="dark"] .theme-icon::after,
body.dark .theme-toggle .theme-toggle-icon::after,
body.dark [data-theme-toggle] .theme-toggle-icon::after,
body.dark .theme-icon::after {
  display: block !important;
}

/* === SITE-WIDE FINAL FS TOGGLE START === */
/* Final look: small black sun in light mode, simple cream moon in dark mode */
html body button.fs-theme-toggle {
  all: unset !important;
  box-sizing: border-box !important;
  position: relative !important;
  display: inline-grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  min-width: 28px !important;
  min-height: 28px !important;
  flex: 0 0 28px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: #111111 !important;
  cursor: pointer !important;
  overflow: visible !important;
  line-height: 1 !important;
  transform: none !important;
  filter: none !important;
}

html[data-theme="dark"] body button.fs-theme-toggle,
html body.dark button.fs-theme-toggle {
  color: #fff4df !important;
}

html body button.fs-theme-toggle::before,
html body button.fs-theme-toggle::after {
  content: none !important;
  display: none !important;
}

html body button.fs-theme-toggle .fs-toggle-mark {
  position: relative !important;
  display: block !important;
  width: 12px !important;
  height: 12px !important;
  border-radius: 50% !important;
  background: currentColor !important;
  box-shadow: none !important;
  pointer-events: none !important;
  transform: none !important;
}

/* Light theme sun rays */
html body button.fs-theme-toggle .fs-toggle-mark::before {
  content: "" !important;
  position: absolute !important;
  inset: -5px !important;
  border-radius: 50% !important;
  background: repeating-conic-gradient(
    currentColor 0deg 12deg,
    transparent 12deg 45deg
  ) !important;
  -webkit-mask: radial-gradient(
    circle,
    transparent 0 7px,
    #000 7px 9px,
    transparent 9px
  ) !important;
  mask: radial-gradient(
    circle,
    transparent 0 7px,
    #000 7px 9px,
    transparent 9px
  ) !important;
}

html body button.fs-theme-toggle .fs-toggle-mark::after {
  content: none !important;
  display: none !important;
}

/* Dark theme moon */
html[data-theme="dark"] body button.fs-theme-toggle .fs-toggle-mark,
html body.dark button.fs-theme-toggle .fs-toggle-mark {
  width: 17px !important;
  height: 17px !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: -5px 4px 0 0 currentColor !important;
  transform: translate(4px, -3px) rotate(-8deg) !important;
  overflow: visible !important;
}

html[data-theme="dark"] body button.fs-theme-toggle .fs-toggle-mark::before,
html body.dark button.fs-theme-toggle .fs-toggle-mark::before,
html[data-theme="dark"] body button.fs-theme-toggle .fs-toggle-mark::after,
html body.dark button.fs-theme-toggle .fs-toggle-mark::after {
  content: none !important;
  display: none !important;
}

html body button.fs-theme-toggle:hover {
  transform: scale(1.06) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

html body button.fs-theme-toggle:focus-visible {
  outline: 2px solid currentColor !important;
  outline-offset: 4px !important;
}
/* === SITE-WIDE FINAL FS TOGGLE END === */