body { font-family: 'Roboto', sans-serif;}
.hero-font { font-family: 'Macondo', cursive; 
}
/* Typing animation */
.typing {
  display: inline-block;
  white-space: nowrap;
  border-right: 3px solid;
  overflow: hidden;
  animation: typing 2.5s steps(13, end) forwards, blink 0.75s step-end infinite;
}
@keyframes typing { from { width: 0; } to { width: 13ch; } }
@keyframes blink { 50% { border-color: transparent; } }

/* Glass card */
.glass-card {
  backdrop-filter: blur(15px);
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 2rem;
  box-shadow: 0 8px 32px rgba(0,0,0,0.1);
  transition: transform 0.3s, box-shadow 0.3s;
}
.glass-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(0,0,0,0.2); }
body.dark .glass-card { background-color: rgba(25,25,25,0.25); }

/* Fade-in sections */
.section { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; }
.section.visible { opacity: 1; transform: translateY(0); }

/* Floating icons */
#floating-icons .icon { transition: all 0.3s ease; opacity:0.5; cursor:pointer; }
#floating-icons .icon.active { opacity:1; transform:translateX(5px); }
.float-icon { animation: float 3s ease-in-out infinite; }
@keyframes float { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} }