body{margin:0;font-family:sans-serif;background:#111;color:#eee}
.main-nav{display:flex;align-items:center;background:#222;padding:1em;position:relative}
.main-nav .logo{color:#d4a373;font-weight:bold;margin-right:auto}
.main-nav ul{display:flex;list-style:none;margin:0;padding:0}
.main-nav a{color:#eee;text-decoration:none;margin-right:1em;transition:color .3s}
.main-nav .active, .main-nav a:hover{color:#d4a373}
.menu-toggle{display:none;background:none;border:none;color:#eee;font-size:1.5em;cursor:pointer}
.hero{position:relative;text-align:center;margin-bottom:1em}
.hero img{width:100%;filter:brightness(0.5)}
.hero-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
.btn{background:#d4a373;color:#111;padding:.5em 1em;text-decoration:none;border-radius:4px}
.container{width:min(90%,1200px);margin:auto;padding:2em 0}
.page-img{width:100%;border-radius:8px;margin:1em 0}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1em}
.card{background:#222;padding:1em;border-radius:8px;transition:transform .3s}
.card:hover{transform:translateY(-5px)}
.reveal{opacity:0;transform:translateY(20px);transition:opacity .6s,transform .6s}
.reveal.active{opacity:1;transform:none}
footer{background:#222;text-align:center;padding:1em}
a{color:#34a1eb}

/* Responsive menu mobile */
@media (max-width: 768px) {
  .main-nav ul {
    display: none;
    flex-direction: column;
    background: #222;
    position: absolute;
    top: 60px;
    left: 0;
    width: 100%;
    padding: 1em 0;
    z-index: 1000;
  }

  .main-nav ul.show {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }

  .main-nav a {
    margin: 0.5em 1em;
  }
}