/* mores.dev */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #f8f9fa; color: #1e293b; font-family: 'Inter', sans-serif; font-weight: 400; line-height: 1.7; }
.hero { text-align: center; padding: 5rem 2rem 3rem; }
.brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.8rem, 4vw, 2.5rem); color: #1e293b; }
.code-panel { background: #1e293b; color: #e2e8f0; padding: 1.25rem 1.5rem; border-radius: 8px; max-width: 400px; margin: 1.5rem auto 0; text-align: left; }
.code-panel.large { max-width: 520px; margin: 0 auto; }
.code-text { font-family: 'JetBrains Mono', monospace; font-size: 0.75rem; white-space: pre; line-height: 1.8; }
.code-comment { color: #64748b; }
.code-cmd { color: #e2e8f0; }
.code-keyword { color: #818cf8; }
.code-string { color: #059669; }
.code-num { color: #f59e0b; }
.features { max-width: 700px; margin: 0 auto; padding: 3rem 1.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.feature-cell { border: 1px solid #e5e7eb; padding: 1.25rem; background: #fff; }
.icon { width: 28px; height: 28px; margin-bottom: 0.75rem; }
.icon.circle { border-radius: 50%; background: #4f46e5; opacity: 0.15; border: 2px solid #4f46e5; }
.icon.square { background: #4f46e5; opacity: 0.15; border: 2px solid #4f46e5; }
.icon.triangle { width: 0; height: 0; border-left: 14px solid transparent; border-right: 14px solid transparent; border-bottom: 24px solid rgba(79,70,229,0.3); }
.feature-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.3rem; }
.feature-text { font-size: 0.75rem; color: #64748b; }
.code-section { padding: 2rem 1.5rem; }
.integrations { display: flex; justify-content: center; gap: 1rem; padding: 2rem; flex-wrap: wrap; }
.int-label { font-family: 'JetBrains Mono', monospace; font-size: 0.65rem; color: #4f46e5; border: 1px solid #e5e7eb; padding: 4px 12px; background: #fff; }
.footer { text-align: center; padding: 3rem 2rem; }
.footer-brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.65rem; color: #94a3b8; }
.fade-in { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; }
.fade-in.visible { opacity: 1; transform: translateY(0); }
@media (max-width: 600px) { .features { grid-template-columns: 1fr; } }