/* Hero styles */
.hero-section { padding: 4rem 1rem; border-radius: 14px; background: rgba(227, 98, 231, 0.15); border: 2px solid rgba(227, 98, 231, 0.2); display: flex; align-items: center; justify-content: center; min-height: 70vh; position: relative; overflow: hidden; }
.hero-content { z-index: 5; max-width: 900px; text-align: center; }
.hero-title { font-size: clamp(2rem, 6vw, 4rem); font-weight: 800; color: var(--text-on-primary); margin-bottom: 0.5rem; }
.typewriter { font-size: 1.125rem; color: var(--text-on-primary); min-height: 42px; margin-bottom: 1.25rem; }
.typewriter-text::after { content: '|'; color: var(--text-on-primary); margin-left: 6px; animation: blink 1s steps(2,end) infinite; }

.cta-button { display: inline-flex; gap: 0.75rem; align-items: center; padding: 0.85rem 1.25rem; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); background: linear-gradient(90deg, rgba(255,255,255,0.06), rgba(255,255,255,0.03)); color: var(--text-on-primary); font-weight: 700; box-shadow: 0 8px 24px rgba(0,0,0,0.2); transition: transform 0.18s ease, box-shadow 0.18s ease; }
.cta-button:hover { transform: translateY(-4px); box-shadow: 0 14px 40px rgba(79,70,229,0.16); }

.hero-particles { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.floating-elements { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.floating-element { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, rgba(118,75,162,0.12), rgba(102,126,234,0.08)); position: absolute; opacity: 0.6; transform: translate3d(0,0,0); }

.typewriter { font-size: 1.125rem; color: var(--secondary-color); min-height: 42px; margin-bottom: 1.25rem; overflow: hidden; white-space: nowrap; }
.typewriter-text { display: inline-block; }
.typewriter-text::after { content: '|'; color: var(--primary-color); margin-left: 6px; animation: blink 1s steps(2,end) infinite; }

@keyframes blink { 0%,50% { opacity: 1 } 51%,100% { opacity: 0 } }

@media (max-width: 768px) {
  .hero-section { padding: 3rem 1rem; }
  .hero-title { font-size: 2rem; }
}