/* ═══════════════════════════════════════════════════════════
   MIMS MOTORS — Production Stylesheet
   BMW editorial · Porsche cinema · Lamborghini drama · Dark/Gold DNA
   ═══════════════════════════════════════════════════════════ */

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

:root {
  --black: #050507;
  --dark:  #0a0a0d;
  --panel: #101014;
  --gold:  #C8A020;
  --gold-light: #E8C848;
  --gold-deep:  #8A6810;
  --white: #F4F4F4;
  --silver:#CCCCCC;
  --text:  #d8d8d8;
  --muted: #888;
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--black);
  color:var(--text);
  font-family:'Barlow',sans-serif;
  font-weight:300;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ─── NAV (BMW-style minimal) ─── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  padding:18px 56px;
  display:flex;align-items:center;justify-content:space-between;
  transition:background .35s,border-color .35s;
  border-bottom:1px solid transparent;
}
nav.scrolled{
  background:rgba(5,5,7,.96);
  border-bottom-color:rgba(200,160,32,.14);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.nav-logo{display:flex;align-items:center;text-decoration:none}
.nav-logo img{height:42px;width:auto}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{
  color:#aaa;text-decoration:none;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;
  transition:color .2s;
}
.nav-links a:hover{color:var(--gold)}
.nav-cta{
  background:transparent;border:1px solid rgba(200,160,32,.55);
  color:var(--gold);padding:8px 22px;
  font-family:'Barlow Condensed',sans-serif;
  font-size:.65rem;letter-spacing:.22em;text-transform:uppercase;
  text-decoration:none;transition:all .22s;
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.nav-cta:hover{background:var(--gold);color:var(--black)}

/* ─── BUTTONS ─── */
.btn-gold{
  display:inline-block;background:var(--gold);color:var(--black);
  padding:14px 36px;font-family:'Barlow Condensed',sans-serif;
  font-size:.72rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;text-decoration:none;border:none;cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition:background .22s,transform .22s;
}
.btn-gold:hover{background:var(--gold-light);transform:translateY(-2px)}
.btn-outline{
  display:inline-block;background:transparent;color:var(--white);
  padding:14px 36px;font-family:'Barlow Condensed',sans-serif;
  font-size:.72rem;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;text-decoration:none;
  border:1px solid rgba(255,255,255,.28);cursor:pointer;
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition:border-color .22s,color .22s,transform .22s;
}
.btn-outline:hover{border-color:var(--gold);color:var(--gold);transform:translateY(-2px)}

/* ─── TYPOGRAPHY HELPERS ─── */
.section-label{
  font-family:'Barlow Condensed',sans-serif;
  font-size:.66rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--gold);margin-bottom:14px;
}
.section-title{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(2.4rem,4.5vw,4rem);letter-spacing:.06em;
  line-height:.96;color:var(--white);
}
.section-body{
  font-size:.96rem;line-height:1.82;color:var(--text);font-weight:300;
}

/* ─── REVEAL ANIMATION ─── */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.reveal.visible{opacity:1;transform:translateY(0)}
.a1{animation:fadeUp 1s .15s cubic-bezier(.16,1,.3,1) both}
.a2{animation:fadeUp 1s .35s cubic-bezier(.16,1,.3,1) both}
.a3{animation:fadeUp 1s .52s cubic-bezier(.16,1,.3,1) both}
.a4{animation:fadeUp 1s .68s cubic-bezier(.16,1,.3,1) both}
.a5{animation:fadeUp 1s .82s cubic-bezier(.16,1,.3,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

/* ─── FOOTER ─── */
footer{background:#000;border-top:1px solid rgba(255,255,255,.05);padding:56px 56px 32px}
.footer-grid{max-width:1340px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:52px}
.footer-logo img{height:46px;width:auto}
.footer-brand-text{margin-top:14px;font-size:.82rem;color:#666;line-height:1.78;max-width:240px}
.footer-col-title{font-family:'Barlow Condensed',sans-serif;font-size:.62rem;letter-spacing:.35em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:9px}
.footer-links a{color:#888;font-size:.84rem;text-decoration:none;transition:color .2s}
.footer-links a:hover{color:#ddd}
.footer-bottom{max-width:1340px;margin:36px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.footer-copy{font-size:.7rem;color:#444;letter-spacing:.04em}
.footer-tag{font-family:'Barlow Condensed',sans-serif;font-size:.6rem;letter-spacing:.32em;text-transform:uppercase;color:#444}

/* ─── RESPONSIVE ─── */
@media(max-width:1100px){
  nav{padding:16px 28px}
  footer{padding:44px 28px 24px}
  .nav-links{display:none}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
  nav{padding:14px 18px}
  footer{padding:36px 18px 22px}
  .footer-grid{grid-template-columns:1fr;gap:28px}
}