:root {
  --accent: #777;
  --bg: #ffffff;
  --card: #f2f2f2;
  --line: #dddddd;
  --rule: #e5e7eb;
  --subtle: #f7f7f8;
  --text: #1a1a1f;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Inter', sans-serif; font-size: 20px; }
h2 { padding-top: 40px; }
footer { color: #777; font-size: 14px; padding-bottom: 20px; }

.modal-header { background: #d2d2d2; }
.modal-footer { background: #e2e2e2; }
.heading-font { font-family: 'Exo', 'Inter', sans-serif; font-weight: 700; }
.navbar, .border-bottom { border-color: var(--rule) !important; }
.bg-subtle { background: var(--subtle); }
.btn-dark { background: var(--accent); border-color: var(--accent); }
.btn-dark:hover { filter: brightness(0.95); }
.btn-outline-dark { color: var(--text); border-color: var(--rule); }
.card { background: var(--card); }
.card .icon { color: var(--accent); }
.logo-circle { width: 60px; height: 60px; display: inline-block; }
.brand-text { color: #777; font-size: 30px; font-weight: 700; letter-spacing: 0.2px; }
.card { border-radius: 14px; }
.quad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 15px 0 30px 0; }
.quad .row { display: flex; align-items: center; gap: 8px; }
.cell { border: 1px solid var(--line); border-radius: 8px; padding: 10px; background: #fff; }
.cell h3 { margin: 0 0 6px; color: #fff; font-size: 18px; }
.cell p { margin: 0; color: #000; font-size: 16px; }
.sy-photo { border-radius: 14px; margin-bottom: 20px; }
.sy-cat { background-color: var(--bg); }
.sy-btn { background-color: var(--accent); color: var(--bg); }

@media (max-width: 640px) { .quad { grid-template-columns: 1fr; } .row { align-items: flex-start; } }