@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;700;900&display=swap');

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #050505;
  color: #f5f5f5;
  font-family: Inter, Arial, sans-serif;
  min-height: 100vh;
}
a { color: inherit; text-decoration: none; }

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 78px;
  padding: 0 5vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 10;
  background: linear-gradient(#050505, transparent);
}
.brand img { width: 54px; height: 54px; object-fit: contain; }
.nav nav { display: flex; gap: 34px; font-size: 11px; font-weight: 700; letter-spacing: .18em; }
.nav nav a { opacity: .75; transition: opacity .2s; }
.nav nav a:hover { opacity: 1; }
.menu { display: none; background: none; border: 0; color: white; font-size: 24px; }

.hero {
  min-height: 100vh;
  padding: 130px 8vw 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "MTB";
  position: absolute;
  right: -5vw;
  bottom: -10vw;
  font-family: Anton, Impact, sans-serif;
  font-size: 38vw;
  line-height: .7;
  color: rgba(255,255,255,.025);
  pointer-events: none;
}
.hero-logo { margin-bottom: 35px; }
.hero-logo img { width: clamp(100px, 14vw, 180px); height: auto; }
.eyebrow, .section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .28em;
  opacity: .55;
}
h1, h2 {
  font-family: Anton, Impact, sans-serif;
  font-weight: 400;
  letter-spacing: .01em;
  line-height: .88;
}
h1 { font-size: clamp(62px, 10.5vw, 160px); margin: 18px 0 28px; }
h1 span, h2 span { color: #777; }
.intro { font-size: 12px; line-height: 1.7; letter-spacing: .12em; opacity: .65; }
.cta {
  margin-top: 35px;
  width: fit-content;
  border: 1px solid #333;
  padding: 15px 20px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  transition: .2s;
}
.cta:hover { background: white; color: black; }
.cta span { margin-left: 25px; }

.section {
  min-height: 75vh;
  padding: 110px 8vw;
  border-top: 1px solid #171717;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section h2 { font-size: clamp(60px, 11vw, 160px); margin-top: 25px; }
.contact p:last-child { margin-top: 30px; opacity: .5; font-size: 13px; }

footer {
  padding: 30px 5vw;
  border-top: 1px solid #171717;
  display: flex;
  justify-content: space-between;
  font-size: 9px;
  letter-spacing: .16em;
  opacity: .5;
}

@media (max-width: 650px) {
  .nav { height: 68px; padding: 0 6vw; }
  .brand img { width: 46px; }
  .nav nav { display: none; }
  .menu { display: block; }
  .hero { padding: 105px 6vw 60px; }
  h1 { font-size: clamp(54px, 16vw, 100px); }
  .hero-logo img { width: 110px; }
  .section { padding: 85px 6vw; min-height: 65vh; }
  footer { padding: 25px 6vw; flex-direction: column; gap: 10px; }
}


/* Added MTB blocks — original styling above remains unchanged */
.news-card {
  margin-top: 45px;
  padding: 32px;
  max-width: 760px;
  border: 1px solid #252525;
  background: linear-gradient(135deg, #101010, #050505);
}
.news-tag, .news-status, .drop-kicker, .drop-copy, .countdown-note {
  font-size: 10px;
  letter-spacing: .2em;
  opacity: .55;
}
.news-card h3 {
  font-family: Anton, Impact, sans-serif;
  font-weight: 400;
  font-size: clamp(28px, 5vw, 58px);
  margin: 22px 0 12px;
}
.news-card p { font-size: 13px; line-height: 1.8; opacity: .65; margin-bottom: 25px; }
.news-status { display: inline-block; border: 1px solid #333; padding: 9px 12px; }
.drop-panel {
  margin-top: 35px; padding: clamp(25px, 6vw, 70px);
  border: 1px solid #242424; text-align: center;
  background: radial-gradient(ellipse at center, #171717 0%, #050505 70%);
}
.drop-panel h2 { font-size: clamp(72px, 15vw, 190px); margin: 25px 0; }
.drop-panel h2 span { color: #777; }
.countdown { display:flex; justify-content:center; gap:clamp(15px,4vw,55px); margin:35px 0 25px; }
.countdown div { display:flex; flex-direction:column; gap:8px; }
.countdown strong { font-family:Anton,Impact,sans-serif; font-size:clamp(30px,6vw,65px); font-weight:400; }
.countdown span { font-size:9px; letter-spacing:.18em; opacity:.5; }
.social-links { display:flex; flex-wrap:wrap; gap:12px; margin-top:35px; }
.social-links a, .newsletter-form button {
  border:1px solid #333; padding:14px 18px; font-size:10px;
  font-weight:700; letter-spacing:.15em; transition:.2s; background:transparent; color:#f5f5f5;
}
.social-links a:hover, .newsletter-form button:hover { background:#fff; color:#000; }
.newsletter { padding:100px 8vw; border-top:1px solid #171717; }
.newsletter h2 { font-size:clamp(55px,10vw,130px); margin:25px 0; }
.newsletter h2 span { color:#777; }
.newsletter-copy { opacity:.55; font-size:13px; margin-bottom:25px; }
.newsletter-form { display:flex; max-width:650px; gap:10px; }
.newsletter-form input { flex:1; min-width:0; padding:16px; background:#0b0b0b; border:1px solid #292929; color:white; font-size:10px; letter-spacing:.1em; }
.newsletter-form button { cursor:pointer; }
.newsletter-message { margin-top:15px; font-size:12px; opacity:.6; }
#back-to-top { position:fixed; right:22px; bottom:22px; z-index:20; width:44px; height:44px;
  border:1px solid #444; background:#080808; color:white; font-size:20px; cursor:pointer;
  opacity:0; pointer-events:none; transition:opacity .25s; }
#back-to-top.visible { opacity:1; pointer-events:auto; }
#mtb-loader { position:fixed; inset:0; z-index:1000; background:#050505; display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:18px; transition:opacity .45s, visibility .45s; }
#mtb-loader img { width:95px; height:95px; object-fit:contain; animation:mtbPulse .7s ease-in-out infinite alternate; }
#mtb-loader span { font-size:10px; letter-spacing:.3em; opacity:.65; }
#mtb-loader.hidden { opacity:0; visibility:hidden; }
@keyframes mtbPulse { from {transform:scale(.94);opacity:.55} to {transform:scale(1.04);opacity:1} }
@media(max-width:650px) {
  .newsletter { padding:85px 6vw; }
  .newsletter-form { flex-direction:column; }
  .social-links a { flex:1; text-align:center; }
  .news-card { padding:22px; }
}