/* ===== HDBnow.com — base site styles (v4: red/white/grey/black) ===== */
:root{
  --red:#E01926; --red-bright:#EE1C25; --red-dark:#B3121C;
  --ink:#16181D; --footer-bg:#0E1013; --sky:#FDECED;
  --grey:#6B7280; --grey-light:#F4F5F7; --border:#E5E7EB; --white:#FFFFFF;
}
*{box-sizing:border-box}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--white);line-height:1.5}
a{color:inherit}

/* ---- Header ---- */
.site-header{background:var(--white);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.header-inner{max-width:1180px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:2px;text-decoration:none;font-weight:800;font-size:20px}
.logo-box{border:2px solid var(--ink);color:var(--ink);padding:2px 6px;border-radius:6px;font-size:16px}
.logo-box.light{border-color:var(--white);color:var(--white)}
.logo-now{color:var(--red);margin-left:2px}
.logo-check{color:var(--red);margin-left:2px}
.nav-wrap{display:flex;align-items:center;gap:18px;position:relative}
.main-nav{display:flex;align-items:center;gap:22px;font-size:14.5px;font-weight:600}
.main-nav a{text-decoration:none;color:var(--ink);opacity:.85}
.main-nav a:hover,.main-nav a.active{opacity:1;color:var(--red)}
.main-nav a.cta{background:var(--red);color:var(--white)!important;padding:9px 16px;border-radius:8px;opacity:1}
.main-nav a.cta:hover{background:var(--red-dark)}

.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:8px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;z-index:2;width:40px;height:40px}
.nav-toggle span{display:block;flex:none;width:24px;height:3px;background:var(--ink);border-radius:2px;
  transition:.2s ease;margin:0}
.nav-toggle.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

/* ---- Footer ---- */
.site-footer{background:var(--footer-bg);color:var(--white);margin-top:60px}
.footer-inner{max-width:1180px;margin:0 auto;padding:40px 20px;display:flex;flex-wrap:wrap;gap:24px;
  justify-content:space-between;align-items:flex-start}
.footer-brand p{color:#9AA0AC;font-size:13px;margin-top:8px}
.footer-links{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.footer-links a{text-decoration:none;color:#D8DADF}
.footer-links a:hover{color:var(--red-bright)}
.footer-copy{width:100%;color:#6B7280;font-size:12.5px;margin-top:20px;border-top:1px solid #23262c;padding-top:16px}

/* ---- WhatsApp float ---- */
.wa-float{position:fixed;right:20px;bottom:20px;background:#25D366;color:#fff;text-decoration:none;
  padding:12px 18px;border-radius:999px;font-weight:700;font-size:14px;box-shadow:0 8px 20px rgba(0,0,0,.2);
  z-index:60;animation:waPulse 2.4s infinite}
@keyframes waPulse{0%,100%{box-shadow:0 8px 20px rgba(0,0,0,.2)}50%{box-shadow:0 8px 26px rgba(37,211,102,.5)}}
@media (prefers-reduced-motion:reduce){.wa-float{animation:none}}

@media (max-width:820px){
  .nav-toggle{display:flex}
  .main-nav{
    display:none;
    position:absolute; top:calc(100% + 14px); right:0; width:230px;
    background:var(--white); flex-direction:column; align-items:stretch; gap:0;
    padding:8px 0; border:1px solid var(--border); border-radius:12px;
    box-shadow:0 16px 32px rgba(0,0,0,.16);
  }
  .main-nav.open{display:flex}
  .main-nav a{padding:13px 18px; border-bottom:1px solid var(--border); opacity:1}
  .main-nav a:last-child{border-bottom:none}
  .main-nav a.cta{margin:8px 18px 4px; text-align:center; border-radius:8px}
}

/* ---- Image-based logo (replaces coded HDB/now/check spans) ---- */
.logo-img{height:34px;width:auto;display:block}
.logo-img-footer{height:30px}