/* ===== MotoBeatz — shared styles ===== */
@import url('https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;0,600;1,400&family=Jost:wght@300;400;500;600&display=swap');

:root{
  --void:#0A0908;
  --charcoal:#161310;
  --charcoal-2:#1F1B15;
  --line:#332C21;
  --smoke:#9A927F;
  --bone:#F3EFE5;

  --gold-1:#8C6A24;
  --gold-2:#E8C766;
  --gold-3:#F6E3A8;
  --gold-grad:linear-gradient(115deg, var(--gold-1) 0%, var(--gold-2) 45%, var(--gold-3) 60%, var(--gold-1) 100%);

  --ember-1:#7A1626;
  --ember-2:#D93B4F;
  --ember-grad:linear-gradient(160deg, var(--ember-2) 0%, var(--ember-1) 100%);

  --radius:3px;
}

*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}

body{
  background:var(--void);
  color:var(--bone);
  font-family:'Jost', sans-serif;
  font-weight:300;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:'Cormorant', serif;
  font-weight:500;
  line-height:1.08;
  letter-spacing:0.01em;
}

a{color:inherit;}
img,svg{display:block; max-width:100%;}

:focus-visible{
  outline:1px solid var(--gold-3);
  outline-offset:4px;
}

.wrap{
  max-width:1160px;
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:640px){ .wrap{padding:0 22px;} }

/* gold gradient text helper */
.goldtext{
  background:var(--gold-grad);
  background-size:220% 220%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.tracked{
  font-family:'Jost', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:12px;
  font-weight:500;
  color:var(--smoke);
}
.tracked .dot{ color:var(--gold-2); margin:0 10px; }
.tracked b{ color:var(--bone); font-weight:500; }

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,9,8,0.86);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.nav{
  display:flex; align-items:center; justify-content:space-between;
  height:84px;
}
.brand{
  display:flex; align-items:center; gap:12px;
  text-decoration:none;
}
.brand img{ height:38px; width:auto; }
.brand span{
  font-family:'Cormorant', serif;
  font-size:23px;
  letter-spacing:0.03em;
  font-weight:600;
}
.brand .b-red{ color:var(--ember-2); }

.nav-links{
  display:none;
  align-items:center;
  gap:38px;
}
.nav-links a{
  text-decoration:none;
  font-size:12.5px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--smoke);
  transition:color .2s ease;
}
.nav-links a:hover{ color:var(--gold-3); }
@media (min-width:900px){ .nav-links{display:flex;} }

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px;
  border-radius:var(--radius);
  font-family:'Jost', sans-serif;
  font-size:12.5px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover{ transform:translateY(-1px); }

.btn-gold{
  background:var(--gold-grad);
  background-size:220% 220%;
  color:#191204;
  font-weight:500;
}
.btn-gold:hover{ box-shadow:0 8px 28px -8px rgba(232,199,102,0.55); }

.btn-line{
  border-color:var(--line);
  color:var(--bone);
}
.btn-line:hover{ border-color:var(--gold-2); color:var(--gold-3); }

/* ---------- mountain divider (signature motif) ---------- */
.divider{
  display:flex; justify-content:center;
  padding:64px 0;
}
.divider svg{ width:120px; height:auto; opacity:0.85; }

/* ---------- FOOTER ---------- */
footer{
  border-top:1px solid var(--line);
  padding:52px 0 40px;
}
.foot-top{
  display:flex; justify-content:space-between; align-items:flex-start;
  flex-wrap:wrap; gap:28px;
  padding-bottom:32px;
}
.foot-brand{ display:flex; align-items:center; gap:12px; }
.foot-brand img{ height:30px; }
.foot-brand span{ font-family:'Cormorant', serif; font-size:19px; letter-spacing:0.03em; }

.foot-links{
  display:flex; gap:30px; flex-wrap:wrap;
  font-size:12.5px; letter-spacing:0.1em; text-transform:uppercase; color:var(--smoke);
}
.foot-links a{ text-decoration:none; }
.foot-links a:hover{ color:var(--gold-3); }

.foot-bottom{
  border-top:1px solid var(--line);
  padding-top:24px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:12px; color:var(--smoke);
}