/* p9r.dev */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: linear-gradient(135deg, #667eea, #764ba2); color: #ffffff; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.6; min-height: 100vh; }
.hero { text-align: center; padding: 6rem 2rem 3rem; position: relative; overflow: hidden; }
.blur-shape { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.2; }
.shape1 { width: 200px; height: 200px; background: #818cf8; top: 10%; left: 10%; }
.shape2 { width: 150px; height: 150px; background: #a78bfa; bottom: 20%; right: 15%; }
.glass-panel { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 16px; padding: 2rem; position: relative; z-index: 1; }
.hero-panel { display: inline-block; }
.dev-badge { display: inline-block; font-family: 'Fira Code', monospace; font-size: 0.55rem; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 9999px; padding: 3px 12px; margin-bottom: 0.75rem; letter-spacing: 0.1em; }
.brand { font-family: 'Sora', sans-serif; font-weight: 700; font-size: clamp(2rem, 5vw, 3rem); }
.tagline { font-size: 0.8rem; opacity: 0.8; margin-top: 0.5rem; }
.features { max-width: 500px; margin: 0 auto; padding: 2rem 1.5rem; display: flex; flex-direction: column; gap: 1rem; }
.glass-card { background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 16px; padding: 1.5rem; }
.card-title { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.3rem; }
.card-desc { font-size: 0.75rem; opacity: 0.8; }
.glass-divider { height: 1px; background: rgba(255, 255, 255, 0.1); max-width: 400px; margin: 1rem auto; }
.metrics { max-width: 500px; margin: 0 auto; padding: 2rem 1.5rem; }
.metrics-bar { display: flex; justify-content: space-around; flex-wrap: wrap; gap: 1rem; }
.metric { text-align: center; }
.metric-num { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.5rem; display: block; color: #a78bfa; }
.metric-label { font-size: 0.6rem; opacity: 0.6; text-transform: uppercase; letter-spacing: 0.1em; }
.integrations { text-align: center; padding: 2rem 1.5rem; }
.int-label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.15em; opacity: 0.6; margin-bottom: 1rem; }
.chip-row { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.chip { font-family: 'Fira Code', monospace; font-size: 0.6rem; padding: 6px 14px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px); }
.closing { text-align: center; padding: 3rem 2rem 4rem; }
.footer-panel { display: inline-block; }
.closing-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); }
/* Accent color for dark contrast */
.accent-dark { color: #1e293b; }