/* ============================================================
   BuildERP unified chrome — nav + footer — "ClearSky" design
   Sticky white translucent nav, rounded gradient accents, light footer.
   ============================================================ */

/* ── NAV ─────────────────────────────────────────────────── */
nav.site-nav{
  position: sticky; top: 0; width: 100%; z-index: 1000;
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid var(--border-soft);
  height: 72px;
  display: flex; align-items: center;
  padding: 0 5%;
  justify-content: space-between;
  transition: box-shadow .25s;
}
.nav-logo{ display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0; }
.nav-logo-icon{
  width:42px; height:42px; border-radius:13px;
  background: linear-gradient(150deg, var(--sky-bright), var(--sky-deep));
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 8px 20px rgba(14,165,233,0.30);
}
.nav-logo-icon svg{ width:21px; height:21px; fill:#fff; }
.nav-logo-text{ line-height:1.25; }
.nav-logo-text strong{ display:block; font-family:'Readex Pro',sans-serif; font-size:1.04rem; font-weight:700; color:var(--navy); }
.nav-logo-text span{ font-size:0.69rem; font-weight:500; color:var(--sky-deep); }

.nav-menu{ display:flex; align-items:center; gap:2px; list-style:none; flex:1; justify-content:center; }
.nav-item{ position:relative; }
.nav-item > a{
  display:flex; align-items:center; gap:5px;
  color:var(--text-mid); text-decoration:none;
  font-size:0.88rem; font-weight:500;
  padding:9px 14px; border-radius:10px;
  transition:all .2s; white-space:nowrap;
}
.nav-item > a:hover,
.nav-item.current > a{ color:var(--sky-deep); background:var(--sky-pale); }
.nav-item > a .arrow{ font-size:0.62rem; transition:transform .25s; display:inline-block; }
.nav-item.open > a .arrow{ transform:rotate(180deg); }

/* dropdowns */
.dropdown{
  display:none; position:absolute; top:calc(100% + 10px); right:0;
  background:var(--white); border:1px solid var(--border-soft);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-lg);
  min-width:232px; padding:10px; z-index:2000;
}
.dropdown.wide{ min-width:520px; }
.dropdown.wide .dd-grid{ display:grid; grid-template-columns:1fr 1fr; gap:2px; }
.nav-item.open .dropdown{ display:block; }
.dd-item{ display:flex; align-items:flex-start; gap:11px; padding:10px 12px; text-decoration:none; border-radius:12px; transition:background .18s; }
.dd-item:hover{ background:var(--sky-wash); }
.dd-icon{
  font-size:1.08rem; width:34px; height:34px; background:var(--sky-pale);
  border-radius:10px; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .18s;
}
.dd-item:hover .dd-icon{ background:var(--sky-pale2); }
.dd-label{ font-size:0.82rem; font-weight:600; color:var(--text-dark); display:block; margin-bottom:2px; }
.dd-sub{ font-size:0.72rem; color:var(--text-light); display:block; line-height:1.4; }
.dd-section-title{ font-size:0.7rem; font-weight:600; letter-spacing:0.04em; color:var(--sky-deep); padding:10px 12px 6px; display:block; }
.dd-divider{ height:1px; background:var(--border); margin:6px 0; }

.nav-cta{
  background: linear-gradient(135deg, var(--sky-bright), var(--sky-deep)) !important;
  color:#fff !important;
  padding:10px 22px !important; border-radius:11px !important;
  font-weight:600 !important;
  box-shadow:0 8px 22px rgba(14,165,233,0.32);
}
.nav-cta:hover{ transform:translateY(-1px); box-shadow:0 12px 28px rgba(14,165,233,0.42); }

/* responsive */
@media(max-width:1024px){
  .nav-logo-text span{ display:none; }
  .nav-menu{ gap:0; justify-content:flex-end; }
  .nav-item > a{ padding:9px 10px; font-size:0.82rem; }
  .dropdown.wide{ min-width:340px; }
  .dropdown.wide .dd-grid{ grid-template-columns:1fr; }
}
@media(max-width:640px){
  nav.site-nav{ padding:0 4%; overflow-x:auto; }
  .dd-sub{ display:none; }
}

/* ── FOOTER (light) ──────────────────────────────────────── */
footer.site-footer{
  background: var(--white);
  padding: 70px 5% 30px;
  border-top: 1px solid var(--border);
}
.footer-inner{ max-width:1260px; margin:0 auto; }
.footer-top{
  display:grid; grid-template-columns:1.8fr 1fr 1fr 1fr; gap:44px;
  padding-bottom:40px; border-bottom:1px solid var(--border-soft); margin-bottom:28px;
}
.f-brand-name{ font-family:'Readex Pro',sans-serif; font-size:1.1rem; font-weight:700; color:var(--navy); margin-bottom:9px; }
.f-brand-tag{ font-size:0.81rem; color:var(--text-mid); line-height:1.8; margin-bottom:20px; max-width:340px; }
.f-contact{ display:flex; align-items:center; gap:9px; font-size:0.81rem; color:var(--text-mid); margin-bottom:8px; }
.f-col-title{ font-size:0.75rem; font-weight:700; color:var(--navy); letter-spacing:.02em; margin-bottom:16px; }
.f-links{ list-style:none; padding:0; margin:0; }
.f-links li{ margin-bottom:9px; }
.f-links a{ font-size:0.81rem; color:var(--text-mid); text-decoration:none; transition:color .2s; }
.f-links a:hover{ color:var(--sky-deep); }
.footer-bottom{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; }
.f-copy{ font-size:0.76rem; color:var(--text-light); }
.f-legal{ display:flex; gap:20px; }
.f-legal a{ font-size:0.76rem; color:var(--text-light); text-decoration:none; }
.f-legal a:hover{ color:var(--sky-deep); }
@media(max-width:820px){
  .footer-top{ grid-template-columns:1fr 1fr; gap:30px; }
  .footer-bottom{ flex-direction:column; align-items:flex-start; }
}
@media(max-width:520px){ .footer-top{ grid-template-columns:1fr; } }