@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
:root{
  --charcoal:#1a1a18;
  --steel:#242420;
  --steel2:#2d2d2a;
  --ember:#c8580a;
  --ember-light:#e06a18;
  --chrome:#9a9690;
  --offwhite:#f0ece6;
  --white:#ffffff;
}
html{scroll-behavior:smooth}
body{background:var(--charcoal);color:var(--offwhite);font-family:'DM Sans',sans-serif;min-height:100vh;display:flex;flex-direction:column}

/* NAV */
nav{
  position:sticky;top:0;z-index:100;
  background:rgba(17,17,15,0.97);
  border-bottom:1px solid rgba(200,88,10,0.25);
  backdrop-filter:blur(10px);
  padding:0 2rem;
  display:flex;align-items:center;justify-content:space-between;
  height:64px;
}
.nav-brand{
  font-family:'Bebas Neue',sans-serif;
  font-size:26px;letter-spacing:3px;
  color:var(--ember);text-decoration:none;
}
.nav-links{display:flex;gap:2rem;list-style:none}
.nav-links a{
  font-size:12px;letter-spacing:2px;text-transform:uppercase;
  color:var(--chrome);text-decoration:none;
  padding:4px 0;border-bottom:1px solid transparent;
  transition:color .2s,border-color .2s;
}
.nav-links a:hover,.nav-links a.active{color:var(--offwhite);border-bottom-color:var(--ember)}
.nav-wa{
  display:flex;align-items:center;gap:8px;
  background:rgba(37,211,102,0.12);
  border:1px solid rgba(37,211,102,0.3);
  color:#25d166;
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  padding:8px 14px;border-radius:2px;text-decoration:none;
  transition:background .2s;
}
.nav-wa:hover{background:rgba(37,211,102,0.2)}
.nav-wa svg{width:14px;height:14px;fill:#25d166}

/* FOOTER */
footer{
  background:#0d0d0b;
  border-top:1px solid rgba(200,88,10,0.2);
  padding:2.5rem 2rem;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  margin-top:auto;
}
.footer-brand{font-family:'Bebas Neue',sans-serif;font-size:30px;letter-spacing:3px;color:var(--ember)}
.footer-tagline{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--chrome)}
.footer-links{display:flex;gap:1.5rem}
.footer-links a{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--chrome);text-decoration:none}
.footer-links a:hover{color:var(--ember)}
.footer-copy{font-size:11px;color:rgba(154,150,144,0.5)}

/* BUTTONS */
.btn-primary{
  display:inline-block;
  background:var(--ember);color:#fff;
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:500;
  letter-spacing:2px;text-transform:uppercase;
  padding:14px 32px;border:none;cursor:pointer;
  border-radius:2px;transition:background .2s;text-decoration:none;
}
.btn-primary:hover{background:var(--ember-light)}
.btn-outline{
  display:inline-block;
  background:transparent;color:var(--offwhite);
  font-family:'DM Sans',sans-serif;font-size:12px;font-weight:400;
  letter-spacing:2px;text-transform:uppercase;
  padding:14px 32px;border:1px solid rgba(154,150,144,0.35);cursor:pointer;
  border-radius:2px;transition:border-color .2s,color .2s;text-decoration:none;
}
.btn-outline:hover{border-color:var(--ember);color:var(--ember)}

/* SECTION HELPERS */
.section-label{font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--ember);margin-bottom:.4rem}
.section-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(28px,4vw,44px);color:var(--offwhite);letter-spacing:1px;margin-bottom:1rem}
.section-body{font-size:14px;color:var(--chrome);line-height:1.7;max-width:560px}

.divider{height:1px;background:linear-gradient(to right,transparent,rgba(200,88,10,0.4),transparent);margin:0}

/* HAMBURGER MOBILE */
.hamburger{display:none;background:none;border:none;cursor:pointer;flex-direction:column;gap:5px;padding:4px}
.hamburger span{width:22px;height:1.5px;background:var(--chrome);display:block;transition:all .2s}
@media(max-width:680px){
  .nav-desktop-links{display:none}
  .hamburger{display:flex}
  nav{flex-wrap:wrap;height:auto;padding:.75rem 1.25rem}
  .mobile-menu{
    display:none;width:100%;padding:.75rem 0;
    flex-direction:column;gap:0;border-top:1px solid rgba(200,88,10,0.15);margin-top:.5rem;
  }
  .mobile-menu.open{display:flex}
  .mobile-menu a{
    font-size:13px;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--chrome);text-decoration:none;padding:.75rem 0;
    border-bottom:1px solid rgba(255,255,255,0.04);
  }
  .mobile-menu a.active,.mobile-menu a:hover{color:var(--offwhite)}
}