:root {
      --cb-brand: #0f172a; /* slate-900 */
      --cb-accent: #4f46e5; /* indigo-600 */
}
/* Hero aesthetic */
.hero-bg {
  background: radial-gradient(1200px 600px at 10% 10%, rgba(79,70,229,.10), transparent),
              linear-gradient(135deg, #f8fafc 0%, #ffffff 60%, #eef2ff 100%);
}
.hero-card { border: 1px dashed rgba(2,6,23,.12); }
/* Photo frames */
.photo-frame {
  width: 88px; height: 88px; border-radius: 50%;
  background: #e2e8f0; /* slate-200 */
  border: 2px solid #cbd5e1; /* slate-300 */
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  overflow: hidden;
}
.photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quick-link { transition: box-shadow .15s ease, transform .08s ease; }
.quick-link:hover { box-shadow: 0 6px 18px rgba(2,6,23,.08); transform: translateY(-1px); }
.tile-card { transition: box-shadow .15s ease; }
.tile-card:hover { box-shadow: 0 6px 18px rgba(2,6,23,.08); }
.brand-dot { width: 36px; height: 36px; border-radius: 999px; background: var(--cb-brand); }
.back-to-top { position: fixed; bottom: 1.5rem; right: 1.5rem; }