@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Playfair+Display:wght@400;600&family=Montserrat:wght@300;500;700&family=Orbitron:wght@400;600&family=Libre+Baskerville:wght@400;700&display=swap');

:root {
  --gold:#d4af37;
  --dark:#0b0b0e;
  --glass:rgba(255,255,255,.08);
  --rolex-green:#0f3d2e;
  --ap-grey:#2b2b2b;
  --rm-red:#b11226;
  --cartier-red:#7d1b1b;
  --patek-brown:#3a2a1a;
  --omega-red:#a31212;
}

*{margin:0;padding:0;box-sizing:border-box}

body{
  background:radial-gradient(circle at top,#1a1a1d,var(--dark));
  color:white;
  font-family:'Montserrat',sans-serif;
}

.glass{
  background:var(--glass);
  backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.15);
}

.nav{
  display:flex;
  justify-content:space-between;
  padding:20px;
}

.nav a{
  color:var(--gold);
  margin:0 10px;
  text-decoration:none;
}

.hero{
  height:60vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  background:linear-gradient(135deg,#000,#222);
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:20px;
  padding:40px;
  
}

.card{
	padding:40px;
  background:#111;
  border:1px solid var(--gold);
  transition:.4s;
  height:170px;
}

.card:hover{
  transform:translateY(-10px);
  box-shadow:0 20px 40px rgba(212,175,55,.4);
}

.timeline div{
  padding:30px;
  border-left:3px solid var(--gold);
  margin:20px;
}

.brand-page{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  padding:40px;
  text-align:center;
}

.rolex{background:linear-gradient(135deg,var(--rolex-green),#000);font-family:'Cinzel',serif}
.ap{background:linear-gradient(135deg,var(--ap-grey),#000);font-family:'Playfair Display',serif}
.haute{background:linear-gradient(135deg,var(--rm-red),#000);font-family:'Orbitron',sans-serif}
.heritage{background:linear-gradient(135deg,var(--cartier-red),#000);font-family:'Libre Baskerville',serif}
.patek{background:linear-gradient(135deg,var(--patek-brown),#000);font-family:'Cinzel',serif}
.omega{background:linear-gradient(135deg,var(--omega-red),#000)}

@keyframes fade{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:none}
}

.rolex,.ap,.haute,.heritage,.patek,.omega{
  animation:fade 1s ease forwards;
}
body::-webkit-scrollbar {
  display: none;
}

aside a{
	text-decoration:none;
}

aside a:visited{
	color:white;
	
}