/* XeroVN brand layer — tokens from the mobile app (ColorResources.PRIMARY_1)
   and the official logo; header mirrors the scrolled navbar on xerovn.com. */
:root {
  --brand: #00498c;
  --brand2: #3a7bc2;
  --deep: #003a70;
  --soft: #ecf3fa;
  --line: #e3eaf2;
  --ink: #14191c;
  --muted: #677275;
  --xero-primary: #00498c;
  --xero-primary-hover: #003a70;
  --xero-sky: #3a7bc2;
  --xero-surface: #ecf3fa;
  --xero-stroke: #d7e6f4;
  --xero-accent: #f9b316;
  --xero-indigo: #352dc9;
}
body {font-family:'Nunito',system-ui,sans-serif}
::selection {background:#f9b31633;color:var(--deep)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible {outline-color:var(--xero-primary)}

/* Header — xerovn.com: white/95 + blur, shadow-xl, indigo text, pill CTA */
.xero-header.site-header {
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.95);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:0;
  box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1);
}
.xero-header .nav-wrap {
  max-width:1480px;height:auto;padding:12px 128px;
  display:flex;align-items:center;justify-content:space-between;gap:32px;
}
.xero-header .xero-identity {display:flex;align-items:center;width:160px;height:48px;transition:transform .2s ease}
.xero-header .xero-identity:hover {transform:scale(1.05)}
.xero-header .xero-identity:active {transform:scale(.95)}
.xero-header .brand-logo-img {width:100%;height:100%;max-height:none;object-fit:contain}
.xero-header .official-nav-actions {display:flex;align-items:center;gap:40px;margin-left:auto}

.xero-header .language-picker {position:relative}
.xero-header .language-current {
  display:inline-flex;align-items:center;gap:8px;
  min-height:0;padding:8px 0;
  background:none;border:0;cursor:pointer;
  color:var(--xero-indigo);font-size:14px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;
}
.xero-header .language-current:hover,.xero-header .language-current[aria-expanded="true"] {background:none;border:0}
.xero-header .language-chevron {width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .3s ease}
.xero-header .language-current:hover .language-chevron,
.xero-header .language-current[aria-expanded="true"] .language-chevron {transform:rotate(180deg)}
.xero-header .language-options {
  position:absolute;right:0;top:120%;z-index:110;
  display:block;min-width:150px;width:auto;padding:0;overflow:hidden;
  background:#fff;border:0;border-radius:16px;
  box-shadow:0 25px 50px -12px rgba(0,0,0,.25);
  animation:xero-drop .3s ease;
}
@keyframes xero-drop {from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.xero-header .language-options a {
  display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:0;
  font-size:14px;font-weight:500;color:#374151;transition:background .2s,color .2s;
}
.xero-header .language-options a + a {border-top:1px solid #352dc91a}
.xero-header .language-options a:hover {background:#f9b3161a;color:var(--xero-indigo)}
.xero-header .language-options a.is-active {background:#f9b3161a;color:var(--xero-indigo)}
.xero-header .lang-flag {display:flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:2px;background:#f9b3161a}

.xero-header .header-contact.xero-partner {
  display:inline-flex !important;align-items:center;
  padding:10px 24px;border-radius:999px;
  background:transparent;border:1px solid #352dc940;color:var(--xero-indigo);
  font-size:14px;font-weight:700;box-shadow:none;
  transition:all .3s ease;
}
.xero-header .header-contact.xero-partner:hover {background:#352dc90d;border-color:#352dc940;transform:translateY(-2px);box-shadow:none}
.xero-header .header-contact.xero-partner:active {transform:none}

.xero-header .menu-btn {display:none;flex-direction:column;gap:6px;width:40px;height:40px;padding:8px;background:none;border:0;justify-content:center}
.xero-header .menu-btn span {display:block;width:24px;height:2px;background:var(--xero-indigo);transition:transform .3s ease,opacity .3s ease}
.xero-header .menu-btn[aria-expanded="true"] span:nth-child(1) {transform:translateY(8px) rotate(45deg)}
.xero-header .menu-btn[aria-expanded="true"] span:nth-child(2) {opacity:0}
.xero-header .menu-btn[aria-expanded="true"] span:nth-child(3) {transform:translateY(-8px) rotate(-45deg)}
.xero-header .mobile-nav {display:none}

@media(max-width:1280px) {.xero-header .nav-wrap {padding-left:80px;padding-right:80px}}
@media(max-width:1024px) {.xero-header .nav-wrap {padding-left:40px;padding-right:40px}}
@media(max-width:767px) {
  .xero-header .nav-wrap {padding:12px 24px}
  .xero-header .xero-identity {width:112px;height:40px}
  .xero-header .official-nav-actions {display:none}
  .xero-header .menu-btn {display:flex}
  .xero-header .mobile-nav.open {
    display:flex;flex-direction:column;
    padding:8px 16px 24px;background:#fff;border-top:1px solid #352dc91a;
  }
  .xero-header .mobile-nav > a:not(.mobile-partner) {
    padding:14px 0;border-bottom:1px solid #352dc91a;background:none;
    font-size:15px;font-weight:600;color:#374151;
  }
  .xero-header .mobile-nav > a:not(.mobile-partner):hover {color:var(--xero-indigo)}
  .xero-header .mobile-lang {padding:16px 0;border-bottom:1px solid #352dc91a}
  .xero-header .mobile-lang-label {display:block;font-size:15px;font-weight:500;color:var(--xero-indigo)}
  .xero-header .mobile-lang-chips {display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
  .xero-header .mobile-lang-chips a {
    display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
    border:1px solid #352dc91a;font-size:14px;font-weight:600;color:#374151;
  }
  .xero-header .mobile-lang-chips a.is-active {border-color:#352dc926;background:#f9b3161a;color:var(--xero-indigo)}
  .xero-header .mobile-nav .mobile-partner {
    display:flex;justify-content:center;margin-top:20px;padding:12px 20px;border-radius:999px;
    border:1px solid #352dc940;background:#fff;color:var(--xero-indigo);font-size:16px;font-weight:700;
  }
  .xero-header .mobile-nav .mobile-partner:hover {background:#352dc90d}
}

/* Brand accent (logo yellow) on small details */
.eyebrow-line,.stage-blue-line,.bottom-rule {background:var(--xero-accent) !important}
.blue-period {color:var(--xero-accent)}

/* Footer — dark navy like xerovn.com, white logo */
footer {background:linear-gradient(160deg,var(--xero-primary) 0%,var(--deep) 100%);color:#fff}
.footer-main p,.footer-main>div>a:not(.logo),.footer-demo p {color:#ffffffb3}
.footer-main h3,.footer-demo span {color:#fff}
.footer-demo {background:#ffffff14;border-color:#ffffff26}
.footer-main>div>a:hover:not(.logo),.footer-bottom a:hover {color:var(--xero-accent)}
.footer-bottom {border-top:1px solid #ffffff26;color:#ffffffa6}
.footer-bottom a {color:#fff}
.footer-logo .brand-logo-img {width:160px;height:55px;object-fit:contain}