/* Responsive */
@media (max-width: 1024px) {
  .hero-content { grid-template-columns: 1fr; text-align: center; }
  .hero-bio { margin: 0 auto 32px; }
  .hero-cta { justify-content: center; }
  .hero-stats { justify-content: center; }
  .ai-demo-wrap { grid-template-columns: 1fr; }
  .about-grid { grid-template-columns: 1fr; }
  .about-image { max-width: 300px; margin: 0 auto; }
  .social-groups { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ai-features { grid-template-columns: 1fr; max-width: 400px; margin: 60px auto 0; }
}

@media (max-width: 768px) {
  .nav-links { display: none; }
  .mobile-toggle { display: block; }
  .section { padding: 60px 0; }
  .section-header { margin-bottom: 40px; }
  .hero { padding: 100px 0 60px; }
  .hero-avatar-wrap { width: 200px; height: 200px; font-size: 4rem; }
  .hero-avatar-inner { font-size: 4rem; }
  .hero-stats { gap: 24px; }
  .hero-stat .num { font-size: 1.5rem; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .product-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .social-links { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .about-grid { gap: 32px; }
  .ai-demo-wrap { gap: 32px; }
}

/* Animations */
.fade-in { opacity: 0; transform: translateY(30px); transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); }
.fade-in.visible { opacity: 1; transform: translateY(0); }

/* Profession badge */
.profession-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(201,168,76,0.1); border: 1px solid rgba(201,168,76,0.3);
  padding: 6px 16px; border-radius: 20px; font-size: 0.8rem; color: var(--accent);
}

/* Toast notification */
.toast {
  position: fixed; bottom: 24px; right: 24px; z-index: 3000;
  background: var(--bg-card); border: 1px solid var(--accent);
  padding: 16px 24px; border-radius: var(--radius-md);
  font-size: 0.9rem; opacity: 0; transform: translateY(20px);
  transition: var(--transition); pointer-events: none;
}
.toast.show { opacity: 1; transform: translateY(0); }

/* Payment QR placeholder */
.payment-qr {
  background: white; width: 200px; height: 200px; margin: 20px auto;
  border-radius: var(--radius-md); display: flex; align-items: center;
  justify-content: center; font-size: 2rem; color: #333;
}