:root { --maxw: 1080px; --pad: 18px; --radius: 18px; --shadow: 0 6px 24px rgba(0,0,0,.06); }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial; color: #0f172a; background: #fafafa; }
header, main, footer { max-width: var(--maxw); margin: 0 auto; padding: 24px var(--pad); }
header { display: flex; align-items: center; gap: 16px; }
header img { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow); }
.hstack { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.lang { margin-left: auto; }
.lang button { border: 1px solid #e2e8f0; background: white; padding: 8px 12px; border-radius: 12px; cursor: pointer; }
.tag { font-size: 12px; padding: 4px 10px; border: 1px solid #e2e8f0; border-radius: 999px; background: white; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.card { background: white; border: 1px solid #e5e7eb; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 10px; }
.card h3 { margin: 0; font-size: 18px; }
.card p { margin: 0; color: #334155; line-height: 1.5; }
.card .cta { display: flex; gap: 8px; margin-top: 8px; }
.button { display: inline-block; text-decoration: none; border: 1px solid #0f172a; padding: 8px 12px; border-radius: 12px; }
a { color: #0f172a; }
section { margin: 28px 0; }
hr { border: none; border-top: 1px solid #e5e7eb; margin: 28px 0; }
footer { color: #64748b; font-size: 14px; text-align: center; }
.hidden { display: none !important; }
.small { font-size: 14px; color: #475569; }
.badges a { font-size: 12px; text-decoration: none; margin-right: 8px; color: #475569; }