/* JENCSoft V5 — balanced dark navigation and footer, bright content.
   Loaded AFTER light-theme.css. No HTML or app data changes required.
   Colors: ink #0A2447, action #123F79, cyan #12B8D4, orange #FA6E37.
*/
:root {
  --v5-midnight: #081b35;
  --v5-navy: #0c2a52;
  --v5-button: #123f79;
  --v5-button-hover: #2064a6;
}

/* Midnight header with high-contrast navigation. */
.site-header,
.site-header.is-scrolled {
  background: rgba(8,27,53,.985);
  border-bottom: 1px solid rgba(105,182,226,.2);
  box-shadow: 0 8px 25px rgba(5,24,50,.13);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
}
.site-header.is-scrolled {
  background: rgba(5,20,42,.99);
  box-shadow: 0 12px 30px rgba(4,20,44,.23);
}
.nav-links > a:not(.nav-cta) {color:#d8e9f7;}
.nav-links > a:not(.nav-cta):hover,
.nav-links > a:not(.nav-cta)[aria-current="page"] {color:#fff;}
.nav-links > a:not(.nav-cta)::after {
  background:linear-gradient(90deg,#24c6e3 5%,#ff8846 100%);
}

/* Preserve the exact approved blue/cyan logo. Its navy lettering remains
   readable against dark sections using one subtle light background chip. */
.site-header .brand-art,
.footer .brand-art {
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 12px 4px 7px;
  background:#fff;
  border:1px solid rgba(221,239,249,.88);
  border-radius:14px;
  box-shadow:0 5px 16px rgba(0,0,0,.13);
}
.site-header .brand-art .brand-wordmark-panel,
.footer .brand-art .brand-wordmark-panel {
  background:transparent;
  border:0;
  padding:0;
  box-shadow:none;
}
.site-header .brand-art img.brand-symbol,
.footer .brand-art img.brand-symbol {filter:none;}

/* Dark-blue CTAs for contrast and a calmer, more professional look. */
.btn-primary,
.contact-panel .btn-primary,
.detail-hero .btn-primary {
  background:linear-gradient(115deg,#0c3062 0%,#155195 65%,#1b63a9 100%);
  border:1px solid rgba(21,73,136,.18);
  color:#fff;
  box-shadow:0 11px 25px rgba(18,61,117,.18);
}
.btn-primary:hover,
.contact-panel .btn-primary:hover,
.detail-hero .btn-primary:hover {
  background:linear-gradient(115deg,#15447c 0%,#2064ad 100%);
  color:#fff;
  box-shadow:0 15px 31px rgba(12,61,117,.26);
}
.btn-primary:focus-visible,.nav-links .nav-cta:focus-visible {
  outline:3px solid #24c7df;
  outline-offset:3px;
}
.btn-ghost {color:#154979;border:1px solid #cbdeec;background:#fff;}
.btn-ghost:hover {background:#eff8ff;border-color:#99c5e5;color:#123f70;}
.nav-links .nav-cta {
  background:linear-gradient(120deg,#174e8a,#1c609e);
  border:1px solid rgba(78,175,219,.54);
  box-shadow:0 6px 18px rgba(0,10,30,.16);
  color:#fff;
}
.nav-links .nav-cta span {color:#74e9fb;}
.nav-links .nav-cta:hover {
  background:linear-gradient(115deg,#205f9c,#287ab7);
  border-color:#85dce9;
  color:#fff;
}
.nav-links .nav-cta:hover span {color:#fff;}
.filter-btn.is-active {
  background:#123f79;
  border-color:#123f79;
  color:#fff;
  box-shadow:0 8px 18px rgba(18,63,121,.15);
}

/* Keep the hero, portfolio, services and contact deliberately airy. */
.hero,.detail-hero,.about-section,.work-section,.service-section,
.features-section,.tech-section,.contact-section {color-scheme:light;}
.contact-panel {color:#173658;}

/* Dark footer, while preserving all four app links and the existing layout. */
.footer {
  color:#bfcee2;
  background:
    radial-gradient(ellipse at 10% 0%,rgba(28,102,155,.18),transparent 42%),
    linear-gradient(132deg,#07162d 0%,#0b2445 100%);
  border-top:1px solid rgba(89,158,204,.27);
}
.footer-brand p {color:#b8cee4;}
.footer-heading {color:#fff;}
.footer-links a {color:#bdcfe0;}
.footer-links a:hover {color:#76e6f5;}
.footer-bottom {
  border-top:1px solid rgba(180,213,237,.19);
  color:#a3b7cd;
}

@media (max-width:650px) {
  .site-header .brand-art,.footer .brand-art {
    border-radius:11px;
    padding:3px 9px 3px 5px;
  }
  .nav-toggle {
    border:1px solid rgba(173,214,241,.29);
    background:rgba(255,255,255,.075);
  }
  .nav-toggle span {background:#fff;}
  .nav-links {
    background:rgba(7,27,53,.995);
    border-bottom:1px solid rgba(119,199,229,.24);
    box-shadow:0 17px 30px rgba(1,12,29,.23);
  }
  .nav-links > a:not(.nav-cta) {
    color:#e1eef9;
    border-bottom:1px solid rgba(190,225,244,.13);
  }
  .nav-links > a:not(.nav-cta):hover {color:#fff;}
  .nav-links .nav-cta {
    color:#fff;
    background:linear-gradient(120deg,#174e8a,#1c609e);
    border-color:rgba(78,175,219,.54);
  }
}
@media (prefers-reduced-motion:reduce) {
  .site-header,.site-header.is-scrolled {transition:none;}
}