body { margin:0; font-family:'Segoe UI'; background:#000; color:#eee; overflow-x:hidden; }

.navbar {
  position:fixed; top:0; left:0; width:100%;
  padding:18px 30px; display:flex; justify-content:space-between; align-items:center;
  background:rgba(0,0,0,0.55); backdrop-filter:blur(10px); z-index:999;
}
.logo { font-size:28px; color:#d4af37; font-weight:700; }
.menu-btn { font-size:30px; color:#d4af37; display:none; cursor:pointer; }

nav { display:flex; gap:25px; }
nav a { color:#ddd; text-decoration:none; font-size:18px; }
nav a:hover { color:#d4af37; }

.hero {
    min-height: calc(100vh - 80px); /* Adjust for navbar height */
    height: auto;                   /* Prevent forced overflow */
    padding-top: 120px;             /* Push down content nicely */
    padding-bottom: 120px;          /* Add breathing room */
    background: url('assets/hero.jpg') center/cover no-repeat;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.overlay { position:absolute; inset:0; background:rgba(0,0,0,0.40); }
.hero-content { position:relative; text-align:center; max-width:800px; padding:0 20px; }
.hero h1 { font-size:64px; color:#d4af37; opacity:0; }
.hero p { font-size:22px; opacity:0; }
.btn { opacity:0; background:#d4af37; padding:14px 36px; border-radius:40px; color:#000; text-decoration:none; font-weight:700; }

.section {
  padding:110px 30px;
  text-align:center;
  opacity:0;
  transform:translateY(40px);
}
.section h2 { font-size:40px; color:#d4af37; }

.grid, .catalog-grid {
  display:flex; flex-wrap:wrap; gap:20px; justify-content:center; margin-top:35px;
}
.grid img, .catalog-grid img {
  width:360px; max-width:100%; border-radius:15px; border:1px solid #444;
  transition:0.3s;
}
.grid img:hover, .catalog-grid img:hover { transform:scale(1.06); }

.whatsapp {
  position:fixed; bottom:25px; right:25px;
  background:#25D366; color:white; font-size:26px;
  width:60px; height:60px; border-radius:50%; display:flex;
  justify-content:center; align-items:center;
  text-decoration:none; z-index:999;
}

footer { padding:40px; text-align:center; background:#000; color:#777; margin-top:50px; }

@media(max-width:900px){
  nav { display:none; }
  .menu-btn { display:block; }
  #mobileMenu {
    position:fixed; top:70px; left:0; width:100%; padding:20px 0;
    background:rgba(0,0,0,0.9); display:none; text-align:center; flex-direction:column;
  }
  #mobileMenu.active { display:flex; }
  #mobileMenu a { font-size:22px; margin:10px 0; }

  .hero h1 { font-size:40px; }
  .hero p { font-size:18px; }

  .grid img, .catalog-grid img { width:90%; }
}