/* simulai.xyz */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0A0A14; color: #6B7280; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.65; }
.section-heading { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.4rem; color: #E8ECF1; text-align: center; margin-bottom: 2rem; }
.hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 80vh; padding: 4rem 2rem; overflow: hidden; }
.morph-blob { width: 300px; height: 300px; background: linear-gradient(135deg, #2EC4B6, #7C3AED); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; animation: morph 8s ease-in-out infinite; position: absolute; opacity: 0.6; filter: blur(2px); }
@keyframes morph {
  0%, 100% { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
  50% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; }
}
.hero-text { position: relative; z-index: 1; text-align: center; }
.hero-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(2.2rem, 5vw, 3.2rem); color: #E8ECF1; letter-spacing: 0.05em; margin-bottom: 0.5rem; }
.hero-sub { font-size: 1.1rem; color: #6B7280; margin-bottom: 1.5rem; }
.cta { display: inline-block; background: #FFD93D; color: #0A0A14; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 0.9rem; padding: 0.6rem 1.5rem; border-radius: 60% 40% 50% 50%; text-decoration: none; }
.gradient-divider { background: linear-gradient(90deg, #2EC4B6, #7C3AED); height: 2px; max-width: 200px; margin: 0 auto; }
.gallery { max-width: 900px; margin: 0 auto; padding: 3rem 2rem; }
.demo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.organic-card { background: #12121E; border: 1px solid #1A1A2E; padding: 2rem; overflow: hidden; }
.card-shape-1 { border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; }
.card-shape-2 { border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%; }
.card-shape-3 { border-radius: 50% 50% 30% 70% / 40% 60% 40% 60%; }
.card-preview { width: 100%; height: 100px; border-radius: 12px; margin-bottom: 1rem; }
.preview-conic { background: conic-gradient(from 0deg, #2EC4B6, #7C3AED, #2EC4B6); animation: spin 6s linear infinite; }
.preview-radial { background: radial-gradient(circle at 30% 30%, #2EC4B6, #0A0A14 70%); animation: pulse-preview 3s ease-in-out infinite; }
.preview-linear { background: repeating-linear-gradient(45deg, #12121E 0px, #12121E 10px, #1A1A2E 10px, #1A1A2E 20px); animation: shift 4s linear infinite; }
@keyframes spin { 100% { transform: rotate(360deg); } }
@keyframes pulse-preview { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
@keyframes shift { 100% { background-position: 40px 0; } }
.card-name { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1rem; color: #E8ECF1; margin-bottom: 0.25rem; }
.card-desc { font-size: 0.85rem; color: #6B7280; margin-bottom: 0.75rem; }
.launch-btn { display: inline-block; background: #FFD93D; color: #0A0A14; font-family: 'Space Grotesk', sans-serif; font-weight: 500; font-size: 0.8rem; padding: 4px 14px; border-radius: 60% 40% 50% 50%; text-decoration: none; }
.experiment { max-width: 900px; margin: 0 auto; padding: 3rem 2rem; }
.experiment-panel { background: #12121E; border: 1px solid #1A1A2E; border-radius: 16px; padding: 2rem; display: flex; gap: 2rem; align-items: center; flex-wrap: wrap; }
.experiment-demo { flex: 1; min-width: 200px; }
.experiment-preview { width: 100%; height: 200px; border-radius: 12px; }
.experiment-info { flex: 1; min-width: 240px; }
.experiment-title { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.3rem; color: #E8ECF1; margin-bottom: 0.75rem; }
.experiment-desc { font-size: 0.9rem; color: #6B7280; margin-bottom: 1rem; }
.tech-stack { max-width: 900px; margin: 0 auto; padding: 2rem; }
.badge-row { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; }
.tech-badge { border: 1px solid #1A1A2E; border-radius: 60% 40% 50% 50%; padding: 4px 12px; font-family: 'Space Grotesk', sans-serif; font-size: 0.8rem; color: #6B7280; }
.footer { max-width: 900px; margin: 0 auto; padding: 3rem 2rem; text-align: center; border-top: 1px solid #1A1A2E; }
.footer-blob { width: 40px; height: 40px; background: linear-gradient(135deg, #2EC4B6, #7C3AED); border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; animation: morph 8s ease-in-out infinite; margin: 0 auto 1rem; }
.footer-tagline { font-family: 'Sora', sans-serif; font-size: 0.9rem; color: #E8ECF1; margin-bottom: 0.5rem; }
.footer-link { font-size: 0.8rem; color: #2EC4B6; text-decoration: none; }
@media (max-width: 640px) { .demo-grid { grid-template-columns: 1fr; } .experiment-panel { flex-direction: column; } }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }