:root {
    --bg-dark: #020617;
    --bg-card: rgba(30, 41, 59, 0.4);
    --accent: #3b82f6;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --glass-border: rgba(255, 255, 255, 0.08);
}
* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Inter', -apple-system, sans-serif; }
body { background-color: var(--bg-dark); color: var(--text-primary); min-height: 100vh; }
.landing { max-width: 640px; margin: 0 auto; padding: 4rem 16px; display: flex; flex-direction: column; gap: 1.25rem; }
h1 { font-size: 1.75rem; font-weight: 700; }
.lead { color: var(--text-secondary); }
.portfolio-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; }
.portfolio-card {
    display: block; padding: 1.25rem 1rem; border-radius: 12px; background: var(--bg-card);
    border: 1px solid var(--glass-border); color: var(--text-primary); text-decoration: none;
    font-weight: 600; overflow-wrap: anywhere; transition: border-color 0.15s, background 0.15s;
}
.portfolio-card:hover, .portfolio-card:focus-visible { border-color: var(--accent); background: rgba(59, 130, 246, 0.12); outline: none; }
.hint { color: var(--text-secondary); font-size: 0.85rem; line-height: 1.5; }
.footer a { color: var(--text-secondary); font-size: 0.85rem; }