/* Hero Title */
#hero h1 {
  font-size: clamp(2.5rem, 8vw, 8rem);  /* now grows larger on wide screens */
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: clamp(0.3em, 1vw, 0.7em);
  margin-bottom: 1rem;
  line-height: 1.1;
  color: #fff;
  text-shadow: 
    0 0 6px #0ff,
    0 0 14px #0ff,
    0 0 20px #0cc;
}



/* Section Titles */
h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: clamp(0.15em, 0.4vw, 0.3em);
  margin-bottom: 0.5rem;
  color: #0ff;
  text-shadow: 0 0 6px rgba(0,255,255,0.4);
}

/* Font & body */
body {
  font-family: 'Inter', sans-serif;
}

/* Card hover effect */
.hover-glow {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hover-glow:hover {
  transform: scale(1.05);
  box-shadow: 0 8px 32px rgba(0, 255, 255, 0.6),
              0 0 16px rgba(0, 255, 255, 0.3);
}

/* Card icons */
.card-icon {
  font-size: 5rem;  /* large emoji */
  line-height: 1;
}

/* Card text */
.card h3,
.card p {
  color: #fff;
}

.card h3 {
  font-size: 1.5rem;           /* big but not too huge */
  font-weight: 700;
  text-transform: uppercase;    /* all caps */
  letter-spacing: 0.1em;        /* space letters out */
  margin-bottom: 0.5rem;
  color: #0ff;                  /* cyan accent */
  text-shadow: 0 0 6px rgba(0,255,255,0.4); /* subtle glow */
}

/* Buttons */
.card a.btn-info {
  background-color: #0ff;
  color: #000;
  font-weight: 600;
}
.card a.btn-info:hover {
  background-color: #0cc;
}