/* Verge Systems Malaysia — site palette, layered over the shared styles.css.
   Navy #071B34 · Blue #0066FF · Cyan #00B8FF */
:root {
  --navy-900: #071b34;
  --navy-800: #0d2d57;
  --navy-700: #0b4aa8;
  --accent: #0066ff;
  --accent-dark: #0052cc;
  --accent-soft: #e6f0ff;
  --accent-on-dark: #00b8ff;
}

.nav.is-scrolled, .home .nav.is-scrolled { background: rgba(7, 27, 52, .92); }
.btn-primary { box-shadow: 0 8px 24px rgba(0, 102, 255, .3); }
.btn-white:hover { background: #e6f0ff; }
.hero-pulse { background: var(--accent-on-dark); }
.hero-proof i, .hero-metrics strong { color: #fff; }
.page-hero::before { background: radial-gradient(70% 120% at 100% 0%, rgba(0, 102, 255, .38) 0%, rgba(0, 184, 255, .08) 45%, transparent 65%); }
.stats-band::before { background: radial-gradient(60% 100% at 100% 0%, rgba(0, 102, 255, .35) 0%, transparent 60%); }
.announce { background: linear-gradient(90deg, #071b34 0%, #0a3b8f 60%, #0066ff 100%); }
.services-grid .service-icon { background: linear-gradient(135deg, var(--accent-soft), #cfe3ff); }

/* The Verge Sdn. Bhd. wordmark is wider than the old logo, so it sits a little
   shorter in the nav to leave room for the menu. */
.nav-logo img { height: 36px; width: auto; max-width: none; flex-shrink: 0; }
.nav.is-scrolled .nav-logo img { height: 32px; }
.footer-brand img { height: 40px; }
@media (max-width: 520px) { .nav-logo img { height: 30px; } }

/* ---- language switcher (nav.php): English / Bahasa Melayu ---- */
.lang-switch { position: relative; flex-shrink: 0; }
.lang-switch summary { list-style: none; display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28);
  color: #d6deea; font-size: .85rem; font-weight: 600; cursor: pointer; user-select: none; white-space: nowrap; }
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary:hover,
.lang-switch[open] summary { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .5); color: #fff; }
.lang-switch summary:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lang-switch .lang-caret { font-size: .6rem; opacity: .8; transition: transform .2s; }
.lang-switch[open] .lang-caret { transform: rotate(180deg); }
.lang-menu { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; min-width: 200px;
  background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 14px 40px rgba(7, 27, 52, .22);
  padding: 6px; animation: lang-menu-in .14s ease-out; }
@keyframes lang-menu-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.lang-menu a { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 8px 10px; border-radius: 8px; color: var(--ink); font-size: .92rem; font-weight: 500; }
.lang-menu a:hover { background: var(--bg); color: var(--navy-900); }
.lang-menu a.active { color: var(--navy-800); font-weight: 700; }
.lang-menu a i { font-size: .8rem; color: var(--accent); }
.lang-names { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.lang-english { font-size: .74rem; font-weight: 400; color: var(--muted); }
/* Desktop: the switcher sits closer to the menu than the nav's normal gap,
   and the menu uses its condensed spacing at every width to leave room for
   it (Malay labels are longer than English). */
.nav-links + .lang-switch { margin-left: -14px; }
@media (min-width: 981px) {
  .nav-inner { gap: 18px; }
  .nav-links { gap: 0; }
  .nav-links a, .nav-links button { padding: 10px 9px; font-size: .9rem; }
  .nav-links + .lang-switch { margin-left: -8px; }
}
/* Small laptops: tighten the logo and switcher. */
@media (min-width: 981px) and (max-width: 1180px) {
  .nav-logo img, .nav.is-scrolled .nav-logo img { height: 30px; }
  .nav-links a, .nav-links button { padding: 10px 7px; }
  .lang-switch .lang-caret { display: none; }
}
/* On phones the switcher sits beside the menu button, which moves to the end. */
@media (max-width: 980px) {
  .nav-inner { gap: 12px; }
  .lang-switch, .nav-links + .lang-switch { margin-left: auto; }
  .nav-toggle { order: 3; margin-left: 0; }
}
@media (max-width: 520px) {
  .nav-inner { gap: 8px; }
  .lang-switch summary { padding: 6px 9px; }
  .lang-switch summary span { display: none; }
}
@media (max-width: 400px) {
  .nav-logo img { height: 24px; }
  .lang-switch .lang-caret { display: none; }
  .nav-toggle { width: 40px; height: 40px; }
}