/* ============================================================
   Shared site footer — one consistent footer across every public
   page. Self-contained (own vars), supports both theme systems
   (html.light AND html[data-theme="light"]). RTL.
   ============================================================ */
:root {
  --sf-bg: #0b0a10;
  --sf-line: #1c1826;
  --sf-fg: #ffffff;
  --sf-fg2: #b7b2c6;
  --sf-faint: #7d7890;
  --sf-hover: #A47CF0;
}
html.light, html[data-theme="light"] {
  --sf-bg: #f5f4fa;
  --sf-line: #e6e3f0;
  --sf-fg: #16121f;
  --sf-fg2: #514b63;
  --sf-faint: #79738a;
}
.site-footer { background: var(--sf-bg); border-top: 1px solid var(--sf-line); margin-top: 40px; color: var(--sf-fg2); }
.site-footer .sf-in { max-width: 1180px; margin: 0 auto; padding: 52px 24px 26px; }
.site-footer .sf-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 34px; }
.site-footer .sf-brand a { display: inline-flex; align-items: center; gap: 10px; color: var(--sf-fg); font-weight: 800; font-size: 20px; text-decoration: none; }
.site-footer .sf-brand svg { width: 36px; height: 36px; border-radius: 10px; }
.site-footer .sf-tag { margin: 14px 0 16px; font-size: 13.5px; line-height: 1.9; max-width: 300px; color: var(--sf-fg2); }
.site-footer .sf-cta { display: inline-block; background: linear-gradient(150deg, #8250E7, #5B34A8); color: #fff !important; font-weight: 700; font-size: 13.5px; padding: 10px 20px; border-radius: 11px; text-decoration: none; box-shadow: 0 8px 20px rgba(130,80,231,.3); }
.site-footer h4 { color: var(--sf-fg); font-size: 13.5px; font-weight: 800; margin: 0 0 14px; }
.site-footer .sf-col a { display: block; color: var(--sf-fg2); text-decoration: none; font-size: 13.5px; padding: 6px 0; transition: color .16s ease; }
.site-footer .sf-col a:hover { color: var(--sf-hover); }
.site-footer .sf-bottom { max-width: 1180px; margin: 0 auto; padding: 18px 24px; border-top: 1px solid var(--sf-line); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 12.5px; color: var(--sf-faint); }
.site-footer .sf-bottom a { color: var(--sf-faint); text-decoration: none; }
.site-footer .sf-bottom a:hover { color: var(--sf-hover); }
@media (max-width: 820px) {
  .site-footer .sf-grid { grid-template-columns: 1fr 1fr; gap: 26px; }
  .site-footer .sf-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .site-footer .sf-grid { grid-template-columns: 1fr; }
  .site-footer .sf-in { padding: 40px 20px 22px; }
}

/* ── back-to-top floating button (shared) ── */
.to-top { position: fixed; inset-inline-end: 20px; bottom: 20px; z-index: 60; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--sf-line); background: var(--sf-bg); color: var(--sf-fg); cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.28); opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .22s ease, transform .22s ease, background .18s; }
.to-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: linear-gradient(150deg, #8250E7, #5B34A8); color: #fff; border-color: transparent; }
.to-top svg { width: 20px; height: 20px; }