/* ── RESET & VARIABLES ─────────────────── */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#fff;--bg2:#f7f7f7;--bg3:#eeeeee;
  --w:#111;--g1:#444;--g2:#666;--g3:#aaa;
  --border:#e0e0e0;--border2:#d0d0d0;
  --red:#000000;--red2:#2B2B2B;--red3:#4D4D4D;
  --card-bg1:#fff;--card-bg2:#fff;--card-bg3:#fff;
  --card-border:#999999;
  --card-w:#111;--card-g:#555;
  --nav-h:64px;--max-w:1200px
}
html{scroll-behavior:smooth;overflow-x:hidden;width:100%;max-width:100vw}
body{background:var(--bg);color:var(--w);font-family:'Poppins',sans-serif;overflow-x:hidden;width:100%;max-width:100vw;position:relative}
img,video,iframe,table,svg{max-width:100%;height:auto;display:block}
* {min-width:0}
a{text-decoration:none;color:inherit}
button{font-family:'Poppins',sans-serif;cursor:pointer;border:none;outline:none}

/* ── CONTAINER ─────────────────────────── */
.wrap{width:100%;max-width:var(--max-w);margin:0 auto;padding:0 clamp(12px,2vw,24px)}
.page-top{height:var(--nav-h)}

/* ── NAV ───────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:399;
  height:var(--nav-h);background:rgba(0,0,0,.97);
  backdrop-filter:blur(20px)
}
.nav-wrap{
  max-width:var(--max-w);margin:0 auto;height:100%;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(12px,2vw,24px);gap:16px
}
.logo{font-size:20px;font-weight:900;letter-spacing:3px;color:#fff;flex-shrink:0}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-links a{color:rgba(255,255,255,.78);font-size:13px;font-weight:500;transition:color .2s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{color:#fff}
.nav-cta{
  background:#9d2433;color:#fff !important;padding:10px 22px;
  font-size:13px;font-weight:700;transition:background .2s var(--ease,cubic-bezier(.4,0,.2,1)),transform .15s var(--ease,cubic-bezier(.4,0,.2,1));
  white-space:nowrap;flex-shrink:0;border-radius:6px;border:none
}
.nav-cta:hover{background:#7d1c29}
.nav-cta:active{transform:scale(.96)}
.hbtn{
  display:none;background:none;border:none;
  color:#fff;width:38px;height:38px;
  font-size:18px;align-items:center;justify-content:center;flex-shrink:0
}

/* ── MOBILE MENU ───────────────────────── */
.mob-menu{
  position:fixed;top:var(--nav-h);left:0;right:0;z-index:398;
  background:rgba(0,0,0,.99);border-bottom:2px solid var(--red3);
  display:flex;flex-direction:column;
  transform:translateY(-110%);transition:transform .35s cubic-bezier(.4,0,.2,1);
  pointer-events:none;max-height:calc(100vh - var(--nav-h));overflow-y:auto
}
.mob-menu.open{transform:translateY(0);pointer-events:all}
.mob-menu a{
  color:rgba(255,255,255,.82);font-size:15px;font-weight:500;
  padding:15px 24px;border-bottom:1px solid rgba(255,255,255,.1);transition:color .2s
}
.mob-menu a:hover{color:#fff}
.mob-cta-link{
  background:#9d2433;color:#fff !important;font-weight:700;
  font-size:15px;text-align:center;border:1px solid rgba(255,255,255,.35);
  margin:14px 20px 20px;padding:14px;display:block;border-radius:6px;
  transition:transform .15s var(--ease,cubic-bezier(.4,0,.2,1))
}
.mob-cta-link:active{transform:scale(.97)}

/* ── FOOTER ────────────────────────────── */
footer{background:#000000;border-top:3px solid #4D4D4D;padding:76px 0 16px}
.f-top{display:grid;grid-template-columns:1fr 1fr 1fr;gap:clamp(12px,2vw,24px);margin-bottom:44px}
.f-col h4{
  font-size:17px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  color:#CCCCCC;margin-bottom:22px
}
.f-col a{display:block;color:rgba(255,255,255,.7);font-size:13px;margin-bottom:12px;transition:color .2s}
.f-col a:hover{color:#fff}
.f-col p{color:rgba(255,255,255,.7);font-size:13px;line-height:1.8;margin-bottom:8px}
.f-col p a{display:inline;margin:0}
.f-copyright{border-top:1px solid rgba(255,255,255,.1);padding:24px 0 0;text-align:center}
.f-copyright p{color:rgba(255,255,255,.45);font-size:12px}

/* ── RESPONSIVE ────────────────────────── */
@media(max-width:1100px){
  .nav-links{gap:14px}
  .nav-links a{font-size:12px}
  .nav-cta{padding:9px 16px;font-size:12px}
}
@media(max-width:1024px){
  :root{--nav-h:60px}
  .nav-links{display:none}
  .hbtn{display:inline-flex}
  .f-top{grid-template-columns:1fr 1fr}
}
@media(max-width:560px){
  :root{--nav-h:54px}
  .f-top{grid-template-columns:1fr}
  .f-col h4{font-size:15px}
}

/* ── WHATSAPP FLOATING BUTTON (every page, appears on scroll like a scroll-to-top button) ── */
.wa-fab{
  position:fixed;right:185px;bottom:20px;z-index:395;
  width:46px;height:46px;border-radius:50%;
  background:#25D366;display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateY(16px) scale(.7);
  transition:opacity .3s var(--ease,cubic-bezier(.4,0,.2,1)),transform .3s var(--ease,cubic-bezier(.4,0,.2,1)),visibility .3s
}
.wa-fab.show{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.wa-fab.show:hover{transform:scale(1.08)}
.wa-fab.show:active{transform:scale(.95)}
.wa-fab svg{width:24px;height:24px;fill:#fff}
.wa-fab-raised{bottom:92px}
@media(min-width:481px){
  .wa-fab{display:none}
}
@media(max-width:480px){
  .wa-fab{
    left:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);
    width:auto;height:48px;border-radius:6px;
    gap:8px
  }
  .wa-fab svg{width:22px;height:22px}
  .wa-fab::after{content:"Chat on WhatsApp";color:#fff;font-size:15px;font-weight:600}
  .wa-fab-raised{bottom:82px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .mob-menu,.nav-cta,.hbtn,.wa-fab{transition:none!important}
}