* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Inter', sans-serif; color: #1E293B; overflow-x: hidden; }

/* Glassmorphism */
.glass { background: rgba(255,255,255,0.6); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.3); }
.glass-strong { background: rgba(255,255,255,0.8); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px); border: 1px solid rgba(255,255,255,0.4); }
.glass-card { background: rgba(255,255,255,0.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,0.5); box-shadow: 0 8px 32px rgba(0,0,0,0.06); transition: all 0.4s cubic-bezier(0.4,0,0.2,1); }
.glass-card:hover { transform: translateY(-4px); box-shadow: 0 20px 60px rgba(0,0,0,0.1); background: rgba(255,255,255,0.8); }

/* Bubbles */
.bubble { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35; pointer-events: none; }

/* Animations */
@keyframes float { 0%,100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-20px) rotate(2deg); } }
@keyframes pulse-soft { 0%,100% { opacity:0.3; transform: scale(1); } 50% { opacity:0.5; transform: scale(1.05); } }
@keyframes pulse-urgent { 0%,100% { opacity:1; } 50% { opacity:0.7; } }

.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-delay { animation: float 7s ease-in-out 1s infinite; }
.animate-pulse-soft { animation: pulse-soft 8s ease-in-out infinite; }
.animate-pulse-urgent { animation: pulse-urgent 2s ease-in-out infinite; }

/* Scroll Reveal */
.reveal { opacity: 0; transform: translateY(40px); transition: all 0.8s cubic-bezier(0.4,0,0.2,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Gradient text */
.gradient-text { background: linear-gradient(135deg, #0EA5A1, #3B82F6, #8B5CF6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.gradient-text-warm { background: linear-gradient(135deg, #F97316, #EF4444, #8B5CF6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Nav */
.nav-scrolled { background: rgba(255,255,255,0.85) !important; backdrop-filter: blur(20px) !important; box-shadow: 0 4px 30px rgba(0,0,0,0.08) !important; }

/* Stats Cards */
.stat-card { background: rgba(255,255,255,0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.5); padding: 20px; border-radius: 20px; text-align: center; }

/* FAQ */
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1), padding 0.4s ease; padding: 0 24px; }
.faq-answer.open { max-height: 500px; padding: 0 24px 20px; }
.faq-chevron { transition: transform 0.3s ease; }
.faq-chevron.open { transform: rotate(180deg); }

/* Mobile menu */
.mobile-menu { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; }
.mobile-menu.open { max-height: 400px; }

/* App Screenshots */
.screenshot-card { position: relative; border-radius: 24px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.12); transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), box-shadow 0.4s ease; }
.screenshot-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 40px 80px rgba(0,0,0,0.18); }
.screenshot-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.screenshot-label { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(15,23,42,0.85), transparent); padding: 20px 16px 16px; color: white; }

/* Form inputs */
.form-input { width: 100%; padding: 12px 16px; border: 1.5px solid #E2E8F0; border-radius: 12px; font-size: 0.875rem; background: white; transition: border-color 0.2s, box-shadow 0.2s; outline: none; font-family: 'Inter', sans-serif; }
.form-input:focus { border-color: #0EA5A1; box-shadow: 0 0 0 3px rgba(14,165,161,0.1); }
.form-label { display: block; font-size: 0.8rem; font-weight: 500; color: #475569; margin-bottom: 6px; }

@media (max-width: 768px) {
  .stat-card { padding: 16px; }
}