* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: #f0f6ff; color: #1e3a5f; min-height: 100vh; }
header { padding: 3rem 2rem; text-align: center; background: #fff; border-bottom: 1px solid #bfdbfe; }
header h1 { font-size: 2.5rem; font-weight: 700; background: linear-gradient(135deg, #1d4ed8, #38bdf8); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
header p { margin-top: 0.5rem; color: #64748b; font-size: 1rem; }
main { max-width: 1100px; margin: 0 auto; padding: 2.5rem 2rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; }
.card { background: #fff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 1.5rem; transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.card:hover { border-color: #1d4ed8; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(29,78,216,0.1); }
.card h2 { font-size: 1.2rem; font-weight: 600; color: #1e3a5f; }
.card p { margin-top: 0.5rem; font-size: 0.9rem; color: #64748b; line-height: 1.6; }
.tech { margin-top: 1rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tech span { background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 999px; padding: 0.2rem 0.7rem; font-size: 0.75rem; color: #1d4ed8; }
.commands { margin-top: 1rem; }
.commands-label { font-size: 0.75rem; color: #64748b; margin-bottom: 0.4rem; }
.commands pre { background: #0f172a; border-radius: 6px; padding: 0.6rem 0.8rem; margin-top: 0.4rem; overflow-x: auto; }
.commands code { font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace; font-size: 0.8rem; color: #7dd3fc; white-space: pre; }
.links { margin-top: 1.2rem; display: flex; gap: 0.75rem; }
.links a { font-size: 0.85rem; text-decoration: none; padding: 0.4rem 0.9rem; border-radius: 6px; transition: opacity 0.2s; }
.links a:hover { opacity: 0.8; }
.btn-app { background: #1d4ed8; color: #fff; }
.btn-gh { background: #fff; color: #1e3a5f; border: 1px solid #bfdbfe; }
footer { text-align: center; padding: 2rem; color: #94a3b8; font-size: 0.8rem; }