/* Dimalytics hub — shared by public/index.html and placeholder project pages.
   Palette mirrors the CRM (public/crm/css/style.css) so the sites feel like one. */
:root {
  --bg: #0f1117;
  --surface: #1a1d27;
  --surface2: #242836;
  --border: #2e3345;
  --text: #e2e4ed;
  --text2: #8b90a5;
  --accent: #4f8cff;
  --green: #34d399;
  --yellow: #fbbf24;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: 'Space Grotesk', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { color-scheme: dark; }
body {
  font-family: var(--sans); background: var(--bg); color: var(--text);
  font-size: 15px; line-height: 1.5; min-height: 100vh;
  padding: 0 24px; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }

.hub { max-width: 880px; margin: 0 auto; padding: 12vh 0 56px; }
.hub-mark { font-size: 34px; font-weight: 600; letter-spacing: -1.2px; line-height: 1.1; }
.hub-mark span { color: var(--accent); }
.hub-tagline { font-family: var(--mono); font-size: 13px; color: var(--text2); margin-top: 10px; }

.hub-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px; margin-top: 44px;
}
.tile {
  display: flex; flex-direction: column; min-height: 168px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 22px; color: var(--text);
  transition: border-color .15s, transform .15s, background .15s;
}
.tile:hover, .tile:focus-visible { border-color: var(--accent); background: var(--surface2); transform: translateY(-1px); outline: none; }
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tile h2 { font-size: 17px; font-weight: 600; letter-spacing: -0.3px; }
.tile p { color: var(--text2); font-size: 13px; margin-top: 8px; }
.tile-go { margin-top: auto; padding-top: 18px; font-family: var(--mono); font-size: 12px; color: var(--accent); }

.tag {
  flex-shrink: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: .6px;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--text2); white-space: nowrap;
}
.tag-lock { color: var(--yellow); border-color: rgba(251, 191, 36, .35); }
.tag-soon { color: var(--green); border-color: rgba(52, 211, 153, .35); }

.hub-foot { margin-top: 64px; font-family: var(--mono); font-size: 11px; color: var(--text2); }
.hub-foot a { color: var(--text2); }
.hub-foot a:hover { color: var(--text); }

/* Placeholder / project pages */
.back { display: inline-block; font-family: var(--mono); font-size: 12px; color: var(--text2); margin-bottom: 28px; }
.back:hover { color: var(--text); }
.panel {
  margin-top: 28px; background: var(--surface); border: 1px dashed var(--border);
  border-radius: 10px; padding: 28px 24px; color: var(--text2); font-size: 14px;
}
.panel code { font-family: var(--mono); font-size: 12.5px; color: var(--text); background: var(--surface2); padding: 1px 6px; border-radius: 4px; }

@media (max-width: 480px) {
  .hub { padding-top: 9vh; }
  .hub-mark { font-size: 30px; }
}