:root{
  --bg: #FFFFFF; --text:#111827; --muted:#6B7280; --border:#E5E7EB; --brand:#0B5FFF; --brand-dark:#0849C8; --surface:#F9FAFB; --shadow:0 8px 24px rgba(0,0,0,.06); --radius:16px;
}
*{box-sizing:border-box} html,body{margin:0;padding:0}
body{font-family:'Titillium Web',system-ui,-apple-system,Segoe UI,Roboto,Ubuntu; color:var(--text); background:var(--bg)}
.container{width:min(1200px,100%); margin-inline:auto; padding-inline:20px}
.topbar{background:linear-gradient(180deg,var(--surface),#fff); border-bottom:1px solid var(--border)}
.topbar .container{display:flex; flex-wrap:wrap; gap:16px; align-items:flex-end; padding:24px 20px}
.brand .eyebrow{letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-size:12px; margin:0 0 6px}
.brand .title{display:block; font-size:36px; font-weight:800; text-decoration:none; color:var(--text); margin-bottom:6px}
.brand .subtitle{margin:0; color:var(--muted)}
.updated{font-size:12px; color:var(--muted); margin-top:6px}
.menu{margin-left:auto; display:flex; gap:10px}
.menu-link{display:inline-block; padding:10px 12px; border-radius:10px; color:var(--text); text-decoration:none; font-weight:600}
.menu-link.active, .menu-link:hover{background:var(--surface); color:var(--brand)}
.content{padding-block:24px}
.section{padding:24px 0; border-top:1px solid var(--border)}
.section:first-of-type{border-top:0}
.section-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
.section h2{font-size:22px; margin:0}
.muted{color:var(--muted)}
.link-more{color:var(--brand); text-decoration:none; font-weight:700}
.link-more:hover{text-decoration:underline}
.is-disabled{opacity:.6; pointer-events:none; cursor:not-allowed; text-decoration:none}
.grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px}
.card{background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:16px; box-shadow:var(--shadow)}
.card h3{margin:0 0 8px; font-size:18px}
.card p{margin:0 0 12px; color:var(--muted)}
.btn{display:inline-block; background:var(--brand); color:#fff; padding:10px 14px; border-radius:10px; text-decoration:none; font-weight:700}
.btn:hover{background:var(--brand-dark)}
.hint{font-size:12px; color:var(--muted); margin-top:8px}
.footer{margin-top:24px; border-top:1px solid var(--border); background:var(--surface)}
.footer .container{padding:16px 20px}
@media (max-width:1024px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.brand .title{font-size:28px} .grid{grid-template-columns:1fr}}




/* --- Header SELFI (refined spacing) --- */
.selfi-header {
  background: #fff;
  border-bottom: 2px solid #e0e6eb;
  padding-block: 12px;
}
.selfi-brand {
  display: flex;
  align-items: center;
  gap: 28px;
  padding-inline: 12px;
}
.selfi-link {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.selfi-logo {
  height: 62px;
  width: auto;
}
.selfi-text {
  line-height: 1.05;
  font-family: "Poppins", Helvetica, sans-serif;
  color: #3e8bd7;
  padding-left: 20px;
}
.selfi-title {
  font-weight: 800;
  font-size: 36px;
  letter-spacing: 0.01em;
  color: #3e8bd7;
}
.selfi-subtitle {
  font-size: 0.95rem;
  color: #4f91cf;
  margin-top: 4px;
}
@media (max-width:640px) {
  .selfi-brand { gap: 18px; }
  .selfi-logo { height: 50px; }
  .selfi-title { font-size: 28px; }
  .selfi-subtitle { font-size: 0.78rem; }
}