.hero-section {
  min-height: 100svh;
  background: linear-gradient(135deg, var(--color-primary) 0%, #0d7060 55%, #0a5a4c 100%);
  color: #fff;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding: calc(var(--navbar-height) + 2rem) 0 3rem;
}
.hero-section .lead,
.hero-section p,
.hero-section h1 { color: #fff; }
.hero-content { position: relative; z-index: 2; }
.hero-logo { height: 64px; width: auto; max-width: 100%; filter: brightness(0) invert(1); }
.hero-title {
  font-size: clamp(2.6rem, 7vw, 5rem);
  line-height: 1.1;
  margin-bottom: .5rem;
  text-shadow: 0 2px 12px rgba(0,0,0,.25);
}
.hero-subtitle { font-size: 1.15rem; opacity: .85; margin-bottom: .25rem; }
.hero-typed {
  font-family: 'Caveat', cursive;
  font-size: clamp(1.6rem, 4vw, 2.5rem);
  font-weight: 700;
  color: var(--color-secondary);
  min-height: 3rem;
  margin-bottom: 1rem;
}
.typed-cursor { color: var(--color-secondary); }
.hero-desc {
  max-width: 620px;
  margin: 0 auto 2rem;
  opacity: .88;
  font-size: 1.05rem;
}
.scroll-hint {
  animation: bounce 2s infinite;
  color: rgba(255,255,255,.65);
}
.scroll-hint svg { width: 32px; height: 32px; }
@keyframes bounce {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(10px); }
}

.hero-blob {
  position: absolute;
  border-radius: 50%;
  opacity: .09;
  background: #fff;
  pointer-events: none;
}
.hero-blob-1 { width: 450px; height: 450px; top: -120px; right: -100px; animation: blob 12s ease-in-out infinite; }
.hero-blob-2 { width: 280px; height: 280px; bottom: -60px; left: -60px;  animation: blob 16s ease-in-out infinite reverse; }
@keyframes blob {
  0%,100% { transform: scale(1) rotate(0deg); }
  50%      { transform: scale(1.15) rotate(30deg); }
}