/* prototypic.dev */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #ffffff; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.6; min-height: 100vh; }
.launch { text-align: center; padding: 8rem 2rem 5rem; position: relative; overflow: hidden; }
.blur-shape { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.2; }
.s1 { width: 200px; height: 200px; background: #8b5cf6; top: 10%; left: 10%; }
.s2 { width: 250px; height: 250px; background: #8b5cf6; bottom: 10%; right: 10%; }
.glass-panel { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 16px; padding: 2rem; }
.hero-panel { display: inline-block; padding: 3rem 4rem; position: relative; z-index: 1; }
.dev-badge { font-family: 'Fira Code', monospace; font-size: 0.6rem; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); padding: 0.15rem 0.5rem; border-radius: 9999px; display: inline-block; margin-bottom: 1rem; letter-spacing: 0.1em; }
.brand { font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); }
.tagline { font-size: 0.85rem; opacity: 0.7; margin-top: 0.3rem; }
.tools { max-width: 480px; margin: 0 auto; padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.feature { padding: 1.5rem; }
.feature-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1rem; margin-bottom: 0.3rem; }
.feature-text { font-size: 0.8rem; opacity: 0.7; }
.code-panel { background: #1e1b4b; border-radius: 12px; padding: 1.5rem; font-family: 'Fira Code', monospace; font-size: 0.75rem; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.2); }
.code-line { margin-bottom: 0.2rem; }
.keyword { color: #c4b5fd; }
.fn { color: #a78bfa; }
.string { color: #86efac; }
.integrate { max-width: 480px; margin: 0 auto; padding: 2rem 1.5rem; }
.integration-bar { display: flex; justify-content: center; gap: 1rem; padding: 1.5rem; }
.icon-square { font-family: 'Fira Code', monospace; font-size: 0.65rem; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 8px; padding: 0.5rem 0.8rem; }
.build { max-width: 480px; margin: 0 auto; padding: 2rem 1.5rem 5rem; text-align: center; }
.cta-panel { display: inline-block; padding: 1.5rem 3rem; }
.cta-text { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1rem; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }