/* =========================================================
   NIGHT MODE TOGGLE
   ========================================================= */

.night-mode-toggle {
  display: inline-flex;
  min-height: 42px;
  gap: 8px;
  margin-left: 14px;
  padding: 9px 13px;
  border: 1px solid rgba(13, 32, 66, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.8);
  color: #102a52;
  cursor: pointer;
  font: 800 0.74rem/1 "Segoe UI", Arial, sans-serif;
  letter-spacing: 0.02em;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgba(10, 32, 78, 0.08);
  align-items: center;
  justify-content: center;
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    box-shadow 180ms ease;
}

.night-mode-toggle:hover,
.night-mode-toggle:focus-visible {
  border-color: rgba(26, 93, 202, 0.55);
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 14px 26px rgba(10, 32, 78, 0.16);
}

.mode-icon {
  display: grid;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  font-size: 1rem;
  line-height: 1;
  place-items: center;
}

/* =========================================================
   NIGHT MODE COLORS
   ========================================================= */

body.future-home {
  transition:
    background 240ms ease,
    color 240ms ease;
}

.future-home.night-mode {
  background: #030712;
  color: #ebf5ff;
}

.future-home.night-mode .future-shell {
  background:
    radial-gradient(
      circle at 12% 8%,
      rgba(45, 112, 255, 0.16),
      transparent 28%
    ),
    radial-gradient(
      circle at 86% 22%,
      rgba(112, 63, 255, 0.13),
      transparent 26%
    ),
    linear-gradient(
      180deg,
      #071326 0%,
      #030712 46%,
      #07111f 100%
    );
}

.future-home.night-mode .future-nav {
  border-color: rgba(133, 185, 255, 0.2);
  background: rgba(5, 15, 31, 0.84);
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.28);
}

.future-home.night-mode .brand-mark {
  border-color: rgba(133, 185, 255, 0.58);
  background: linear-gradient(135deg, #102f5e, #172047);
  color: #eaf5ff;
}

.future-home.night-mode .nav-links a {
  color: #c8dcf3;
}

.future-home.night-mode .nav-links a:hover,
.future-home.night-mode .nav-links a:focus-visible {
  color: #ffffff;
}

.future-home.night-mode .night-mode-toggle {
  border-color: rgba(139, 190, 255, 0.44);
  background: rgba(16, 38, 75, 0.92);
  color: #f8fbff;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28);
}

.future-home.night-mode .night-mode-toggle:hover,
.future-home.night-mode .night-mode-toggle:focus-visible {
  border-color: #a9d5ff;
  background: rgba(30, 69, 128, 0.94);
}

.future-home.night-mode .signal-line,
.future-home.night-mode .card-index,
.future-home.night-mode .home-project-card > span,
.future-home.night-mode .about-snapshot span,
.future-home.night-mode .mission-strip span {
  color: #7dc5ff;
}

.future-home.night-mode h1,
.future-home.night-mode h2,
.future-home.night-mode h3,
.future-home.night-mode strong {
  color: #f2f8ff;
}

.future-home.night-mode p,
.future-home.night-mode .tech,
.future-home.night-mode .hero-lead,
.future-home.night-mode .command-readout {
  color: #c4d5ea;
}

.future-home.night-mode .mission-strip article,
.future-home.night-mode .proof-feature,
.future-home.night-mode .about-snapshot,
.future-home.night-mode .home-skill-strip article,
.future-home.night-mode .identity-card,
.future-home.night-mode .home-project-card,
.future-home.night-mode .command-center,
.future-home.night-mode .game-launchpad,
.future-home.night-mode .home-contact-form {
  border-color: rgba(125, 197, 255, 0.22);
  background: linear-gradient(
    145deg,
    rgba(11, 28, 55, 0.92),
    rgba(5, 12, 27, 0.94)
  );
  box-shadow: 0 20px 38px rgba(0, 0, 0, 0.32);
}

.future-home.night-mode .home-project-card:hover,
.future-home.night-mode .identity-card:hover,
.future-home.night-mode .proof-feature:hover {
  border-color: rgba(125, 197, 255, 0.58);
}

.future-home.night-mode .primary-action,
.future-home.night-mode .inline-action,
.future-home.night-mode .command-buttons button,
.future-home.night-mode .game-controls button,
.future-home.night-mode .game-close {
  border-color: rgba(123, 193, 255, 0.48);
  background: linear-gradient(135deg, #1b64c7, #5542bb);
  color: #ffffff;
}

.future-home.night-mode .secondary-action,
.future-home.night-mode .project-actions a,
.future-home.night-mode .email-link {
  border-color: rgba(125, 197, 255, 0.32);
  background: rgba(10, 31, 61, 0.72);
  color: #dff0ff;
}

.future-home.night-mode .command-buttons button:hover,
.future-home.night-mode .command-buttons button:focus-visible,
.future-home.night-mode .project-actions a:hover,
.future-home.night-mode .project-actions a:focus-visible,
.future-home.night-mode .email-link:hover,
.future-home.night-mode .email-link:focus-visible {
  border-color: #a9d5ff;
  outline: none;
  filter: brightness(1.15);
}

.future-home.night-mode .home-skill-strip i {
  background: linear-gradient(90deg, #4ec7ff, #9d80ff);
  box-shadow: 0 0 14px rgba(89, 183, 255, 0.52);
}



.future-home.night-mode .game-overlay {
  background: rgba(1, 5, 18, 0.88);
}

.future-home.night-mode .game-panel,
.future-home.night-mode .game-sky {
  border-color: rgba(125, 197, 255, 0.26);
  background-color: #07152b;
}

/* =========================================================
   MOBILE NAVIGATION
   ========================================================= */

@media (max-width: 760px) {
  .future-nav {
    flex-wrap: wrap;
  }

  .future-nav .night-mode-toggle {
    margin-left: auto;
  }

  .night-mode-toggle {
    min-height: 38px;
    margin-left: 0;
    padding: 8px 11px;
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .night-mode-toggle .mode-label {
    display: none;
  }

  .night-mode-toggle {
    width: 40px;
    padding: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .night-mode-toggle,
  body.future-home {
    transition: none;
  }
}
/* FIX: ABOUT SNAPSHOT CARD CONTRAST IN NIGHT MODE */

.future-home.night-mode .about-snapshot > div {
  border: 1px solid rgba(125, 197, 255, 0.3) !important;
  background: linear-gradient(
    145deg,
    rgba(13, 34, 67, 0.98),
    rgba(5, 13, 29, 0.98)
  ) !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35) !important;
}

.future-home.night-mode .about-snapshot > div span {
  color: #7fc8ff !important;
}

.future-home.night-mode .about-snapshot > div strong {
  color: #ffffff !important;
}

.future-home.night-mode .about-snapshot > div p {
  color: #c7d9ed !important;
}
/* FIX: PROCESS CARD CONTRAST IN NIGHT MODE */

.future-home.night-mode .home-timeline li {
  border: 1px solid rgba(125, 197, 255, 0.3) !important;
  background: linear-gradient(
    145deg,
    rgba(13, 34, 67, 0.98),
    rgba(5, 13, 29, 0.98)
  ) !important;
  box-shadow: 0 18px 34px rgba(0, 0, 0, 0.35) !important;
}

.future-home.night-mode .home-timeline li b {
  color: #ffffff !important;
}

.future-home.night-mode .home-timeline li p {
  color: #c7d9ed !important;
}

.future-home.night-mode .home-timeline li::before {
  color: #ff5b9b !important;
}
/* =========================================================
   SUBTLE NAVIGATION BAR
   ========================================================= */

.future-nav {
  min-height: 58px !important;
  padding: 0 10px !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(125, 197, 255, 0.12) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Smaller, quieter logo */
.brand-mark {
  width: 38px !important;
  height: 38px !important;
  border-width: 1px !important;
  box-shadow: none !important;
}

.brand-mark span {
  font-size: 0.78rem !important;
}

/* Cleaner navigation links */
.nav-links {
  gap: clamp(18px, 2.2vw, 34px) !important;
}

.nav-links a {
  color: rgba(218, 232, 248, 0.82) !important;
  font-size: 0.82rem !important;
  font-weight: 700 !important;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: #ffffff !important;
}

/* Make Day/Night Mode look like a quiet utility control */
.night-mode-toggle {
  min-height: 34px !important;
  gap: 6px !important;
  padding: 7px 10px !important;
  border: 1px solid rgba(125, 197, 255, 0.2) !important;
  border-radius: 999px !important;
  background: rgba(125, 197, 255, 0.06) !important;
  box-shadow: none !important;
  color: rgba(226, 240, 255, 0.84) !important;
  font-size: 0.68rem !important;
}

.night-mode-toggle:hover,
.night-mode-toggle:focus-visible {
  border-color: rgba(125, 197, 255, 0.52) !important;
  background: rgba(125, 197, 255, 0.13) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Keep it subtle in dark mode too */
.future-home.night-mode .future-nav {
  background: rgba(3, 10, 22, 0.32) !important;
  border-bottom-color: rgba(125, 197, 255, 0.14) !important;
  box-shadow: none !important;
}

.future-home.night-mode .night-mode-toggle {
  background: rgba(125, 197, 255, 0.06) !important;
  color: rgba(231, 242, 255, 0.84) !important;
}

/* Phone layout */
@media (max-width: 760px) {
  .future-nav {
    min-height: 54px !important;
    padding: 0 4px !important;
  }

  .nav-links {
    gap: 13px !important;
  }

  .nav-links a {
    font-size: 0.72rem !important;
  }
}

/* =========================================================
   STATIC TOP NAVIGATION
   The former scroll-triggered side menu has been removed.
   ========================================================= */

.side-menu-toggle,
.dropdown-night-toggle {
  display: none !important;
}

.top-night-toggle {
  display: inline-flex !important;
}

.future-nav {
  border-radius: 18px !important;
}

@media (max-width: 760px) {
  .future-nav {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 40px !important;
    min-height: 62px !important;
    padding: 8px 6px !important;
    gap: 8px !important;
    align-items: center !important;
    border-radius: 16px !important;
  }

  .future-nav .brand-mark {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }

  .future-nav .nav-links {
    display: flex !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: clamp(7px, 2.4vw, 13px) !important;
    overflow-x: auto;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .future-nav .nav-links::-webkit-scrollbar {
    display: none;
  }

  .future-nav .nav-links a {
    flex: 0 0 auto;
    min-height: 0 !important;
    padding: 5px 0 !important;
    font-size: clamp(0.61rem, 2.35vw, 0.72rem) !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .future-nav .top-night-toggle {
    display: grid !important;
    width: 40px !important;
    min-height: 40px !important;
    margin: 0 !important;
    padding: 6px !important;
    place-items: center !important;
  }

  .future-nav .top-night-toggle .mode-label {
    display: none !important;
  }
}

/* =========================================================
   JAIRE DEVELOPMENT NAVBAR LOGO FIX
   ========================================================= */

.brand-mark {
  display: flex !important;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  padding: 4px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 141, 228, 0.55) !important;
  border-radius: 50% !important;
  background: #ffffff !important;
  box-shadow: 0 0 14px rgba(0, 141, 228, 0.2) !important;
  align-items: center !important;
  justify-content: center !important;
}

.brand-mark img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  border-radius: 50% !important;
  object-fit: contain !important;
}

.future-home.night-mode .brand-mark {
  background: #ffffff !important;
  border-color: rgba(125, 197, 255, 0.7) !important;
}

@media (max-width: 760px) {
  .brand-mark {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }
}
  

/* MULTI-PAGE NIGHT MODE */
.future-home.night-mode .page-hero-visual,
.future-home.night-mode .service-card,
.future-home.night-mode .package-grid article,
.future-home.night-mode .value-grid article,
.future-home.night-mode .preview-steps li,
.future-home.night-mode .contact-method-card,
.future-home.night-mode .final-cta,
.future-home.night-mode .site-footer {
  border-color: rgba(125, 197, 255, 0.22);
}

.future-home.night-mode .service-card,
.future-home.night-mode .package-grid article,
.future-home.night-mode .value-grid article,
.future-home.night-mode .preview-steps li,
.future-home.night-mode .contact-method-card,
.future-home.night-mode .final-cta {
  background: linear-gradient(145deg, rgba(11, 28, 55, 0.92), rgba(5, 12, 27, 0.94));
}



.future-home.night-mode .site-footer a,
.future-home.night-mode .service-card strong,
.future-home.night-mode .full-process li p strong {
  color: #f2f8ff;
}
body.night-mode .service-details li {
  color: #cbd5e1;
}

body.night-mode .service-details li::marker {
  color: #94a3b8;
}

/* =========================================================
   FINAL RESPONSIVE NAVIGATION CENTERING
   ========================================================= */

@media (min-width: 761px) {
  .future-nav {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) !important;
    align-items: center !important;
  }

  .future-nav .brand-mark {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .future-nav .nav-links {
    position: static !important;
    grid-column: 2 !important;
    left: auto !important;
    width: max-content !important;
    max-width: 100% !important;
    justify-self: center !important;
    justify-content: center !important;
    transform: none !important;
  }

  .future-nav .top-night-toggle {
    grid-column: 3 !important;
    margin-left: 0 !important;
    justify-self: end !important;
  }
}

@media (max-width: 760px) {
  .future-nav {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) 44px !important;
    align-items: center !important;
    column-gap: 8px !important;
  }

  .future-nav .brand-mark {
    grid-column: 1 !important;
    justify-self: start !important;
  }

  .future-nav .nav-links {
    position: static !important;
    grid-column: 2 !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: clamp(7px, 1.7vw, 13px) !important;
    overflow-x: auto;
    justify-self: stretch !important;
    justify-content: center !important;
    transform: none !important;
  }

  .future-nav .top-night-toggle {
    grid-column: 3 !important;
    width: 40px !important;
    margin: 0 !important;
    justify-self: end !important;
  }
}

/* =========================================================
   NIGHT MODE: OPTIMIZED SIDE NAVIGATION
   ========================================================= */

@media (min-width: 761px) {
  .future-home.night-mode .future-nav.is-side-nav {
    border-color: rgba(125, 197, 255, 0.28) !important;
    background: rgba(5, 15, 31, 0.96) !important;
    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34) !important;
  }

  .future-home.night-mode
    .future-nav.is-side-nav
    .side-menu-toggle {
    border-color: rgba(125, 197, 255, 0.42) !important;
    background: rgba(125, 197, 255, 0.1) !important;
    color: #edf6ff !important;
  }

  .future-home.night-mode
    .future-nav.is-side-nav.is-side-menu-open
    .nav-links {
    border-color: rgba(125, 197, 255, 0.28) !important;
    background: rgba(5, 15, 31, 0.98) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.4) !important;
  }

  .future-home.night-mode
    .future-nav.is-side-nav.is-side-menu-open
    .nav-links a {
    color: #dbeaff !important;
  }

  .future-home.night-mode
    .future-nav.is-side-nav.is-side-menu-open
    .nav-links a:hover,
  .future-home.night-mode
    .future-nav.is-side-nav.is-side-menu-open
    .nav-links a:focus-visible {
    background: rgba(125, 197, 255, 0.14) !important;
    color: #ffffff !important;
  }

  .future-home.night-mode
    .future-nav.is-side-nav.is-side-menu-open
    .dropdown-night-toggle {
    border-color: rgba(125, 197, 255, 0.4) !important;
    background: rgba(125, 197, 255, 0.1) !important;
    color: #edf6ff !important;
  }
}