/* Variant: Obsidian — the Dashboard hero in full dark mode with an electric blue accent.
   Layered on themes/dashboard.css. Dark only. */

:root {
  --bg: #0a0b0f;
  --surface: #12141a;
  --muted: #0f1116;
  --ink: #eef0f5;
  --ink-2: #9097a6;
  --line: #222631;
  --accent: #3b9eff;
  --accent-ink: #06101c;
  --accent-soft: #10233a;
  --green-soft: #13202e;
  --amber-soft: #2a2216;
  --night: #12141a;
  --night-2: #1a1d25;
  --night-line: rgba(255, 255, 255, 0.08);
  --night-ink: #eef0f5;
  --night-ink-2: #9097a6;

  --ui-bg: #161921;
  --ui-line: #252a35;
  --ui-fill: #2c3240;
  --ui-fill-2: #1c2029;
  --ui-strong: #eef0f5;
  --ui-accent: #3b9eff;
  --ui-img: #13253b;
  --ui-tint-a: #17304f;
  --ui-tint-b: #2a2350;
  --ui-tint-c: #3a2c16;

  color-scheme: dark;
}

.masthead { background: rgba(10, 11, 15, 0.8); border-bottom-color: var(--line); }
.pill--dark { background: var(--ink); color: var(--bg); }

.dsh-hero > .wrap:last-child::before { background: radial-gradient(closest-side, rgba(59, 158, 255, 0.35), rgba(130, 90, 255, 0.15) 60%, transparent); }
.dsh { background: var(--surface); box-shadow: 0 50px 100px -50px rgba(59, 158, 255, 0.4), 0 0 0 1px var(--line); }
.dsh-side { background: #0f1116; }
.dsh-logo { color: var(--accent-ink); }
.dsh-side li.is-on { color: #8cc6ff; }
.dsh-bars span:nth-child(odd) { background: #1f4f8a; }
.dsh-spark--1 { background: linear-gradient(180deg, rgba(59, 158, 255, 0.45), rgba(59, 158, 255, 0.05)); }
.dsh-spark--2 { background: linear-gradient(180deg, rgba(140, 110, 255, 0.45), rgba(140, 110, 255, 0.05)); }
.dsh-spark--3 { background: linear-gradient(180deg, rgba(255, 170, 80, 0.4), rgba(255, 170, 80, 0.05)); }
.dsh-doc__ico { background: #3b9eff; }

.tile, .faq details, .contact__card, .product__visual { border: 1px solid var(--line); }
.tile--dark { background: linear-gradient(160deg, #10233a, #12141a 70%); }
.tile--dark .focus strong { color: #8cc6ff; }
.section--muted { border-block: 1px solid var(--line); }
.faq summary::after { background: var(--accent-soft); color: var(--accent); }
.section--contact { background: radial-gradient(60% 80% at 85% 20%, rgba(59, 158, 255, 0.15), transparent), var(--night); border-top: 1px solid var(--line); }
.footer { border-top: 1px solid var(--line); }