/* MARK: Codepen
https://codepen.io/dragontheory/pen/abeEEmz */

/* MARK: HERO
*/

/* Generated by VSCode Copilot */
.hero {
  display: grid;
  position: relative;
  min-height: 100dvh;
  text-align: center;
}

.hero svg {
  max-width: 75%;
  place-self: center;
}

.hero h1 {
  font-size: clamp(2rem, 8vw, 4rem);
  margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

.hero button {
  padding: clamp(0.75rem, 2vw, 1rem) clamp(1.5rem, 4vw, 2rem);
  font-size: clamp(0.9rem, 2.5vw, 1rem);
  font-weight: 600;
  border: none;
  border-radius: clamp(0.375rem, 1vw, 0.5rem);
  cursor: pointer;
  transition: all 0.3s ease;
  min-width: max-content;
}

.hero .btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: currentColor;
  transform: translateY(0);
}

.hero .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(102, 126, 234, 0.4);
}

.hero .btn-secondary {
  background: rgba(255, 255, 255, 0.9);
  color: #333;
}

.hero .btn-secondary:hover {
  background: currentColor;
  transform: translateY(-1px);
}

.hero .btn-outline {
  background: transparent;
  color: currentColor;
  border: 2px solid rgba(255, 255, 255, 0.8);
}

.hero .btn-outline:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: currentColor;
}