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

/* BODY */
body {font-family:'Roboto', sans-serif; line-height:1.6; background:#0d0d0d; color:#f0e6d2; overflow-x:hidden;}

/* CONTAINER */
.container {width:90%; max-width:1100px; margin:auto; padding:20px 0;}

/* HEADER */
header {background:#111; color:#f4b400; padding:15px 0;}
header h1 {text-align:center; font-size:30px; font-family:'Playfair Display', serif;}
nav {text-align:center; position:relative;}
nav ul {list-style:none; display:flex; justify-content:center;}
nav ul li {margin:0 20px;}
nav ul li a {color:#f4b400; text-decoration:none; font-weight:500; transition:0.3s;}
nav ul li a:hover {color:#fff;}
.menu-toggle {display:none; cursor:pointer; font-size:28px; color:#f4b400;}

/* HERO */
.hero {position:relative; overflow:hidden; height:500px; display:flex; align-items:center; justify-content:center; flex-direction:column;}
.hero canvas#heroParticles {position:absolute; top:0; left:0; width:100%; height:100%; z-index:0;}
.hero .overlay {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); z-index:1;}
.hero .container {position:relative; z-index:2; text-align:center;}
.hero h2 {font-size:36px; font-family:'Playfair Display', serif; animation:fadeInDown 1s;}
.hero p {font-size:20px; margin-bottom:20px;}
.symbols {margin-top:20px;}
.symbol {font-size:30px; margin:0 10px; opacity:0.6; transition:0.5s;}
.symbol:hover {transform:scale(1.3); opacity:1;}

/* BUTTONS */
.btn {display:inline-block; background:#f4b400; color:#111; padding:15px 30px; text-decoration:none; border-radius:6px; font-weight:bold; transition: all 0.3s ease, box-shadow 0.3s ease; box-shadow:0 0 8px rgba(244,180,0,0.6);}
.btn:hover {background:#e0a800; transform:scale(1.05); box-shadow:0 0 20px rgba(244,180,0,0.9);}

/* SERVICES / CARDS */
section {padding:50px 0;}
section h2 {text-align:center; font-size:32px; margin-bottom:30px; font-family:'Playfair Display', serif;}
.card {background:#1a1a1a; padding:25px; margin:15px 0; border-radius:8px; box-shadow:0 4px 20px rgba(244,180,0,0.4); font-size:18px; opacity:0; transform:translateY(20px); transition:all 0.6s ease-out;}
.card.visible {opacity:1; transform:translateY(0);}
.card:hover {box-shadow:0 6px 30px rgba(244,180,0,0.6); transform:scale(1.02);}

/* FORM */
form input, form textarea {width:100%; padding:12px; margin:10px 0; border:1px solid #f4b400; border-radius:5px; background:#111; color:#f4b400;}
form button {width:100%; margin-top:10px;}

/* FOOTER */
footer {background:#111; color:#f4b400; text-align:center; padding:20px 0; margin-top:40px;}

/* RESPONSIVE */
@media(max-width:768px){
  nav ul {flex-direction:column; display:none;}
  nav ul.active {display:block;}
  .menu-toggle {display:block;}
  .hero h2 {font-size:28px;}
}

/* ANIMATIONS */
@keyframes fadeInDown {from {opacity:0; transform:translateY(-20px);} to {opacity:1; transform:translateY(0);}}
.fade-up {opacity:0; transform:translateY(20px); transition:all 0.6s ease-out;}
.fade-up.visible {opacity:1; transform:translateY(0);}