/* Variant: Noir — the Showcase tabbed hero on near-black with gold.
   Layered on themes/showcase.css. Dark only. */

:root {
  --bg: #0e0d0b;
  --surface: #171512;
  --muted: #1e1b17;
  --ink: #f3efe6;
  --ink-2: #a8a092;
  --line: #2b2822;
  --accent: #d8b25e;
  --accent-ink: #14120e;
  --accent-soft: #2e2716;
  --green-soft: #26211a;
  --amber-soft: #2e2416;
  --night: #1a1814;
  --night-2: #24211b;
  --night-line: rgba(255, 245, 225, 0.1);
  --night-ink: #f3efe6;
  --night-ink-2: #a8a092;

  --web: #d8b25e;
  --web-tint: #2a2416;
  --crm: #f08c4a;
  --crm-tint: #2c1f15;
  --doc: #e0708a;
  --doc-tint: #2c1a1f;

  --ui-bg: #1c1a16;
  --ui-line: #2e2a23;
  --ui-fill: #3a352c;
  --ui-fill-2: #25221c;
  --ui-strong: #f3efe6;
  --ui-img: #2a2416;
  --ui-tint-a: #3a3019;
  --ui-tint-b: #3a2618;
  --ui-tint-c: #3a2026;

  color-scheme: dark;
}

.masthead { background: rgba(14, 13, 11, 0.82); border-bottom-color: var(--line); }
.pill--dark { background: var(--accent); color: var(--accent-ink); }
.sc-hero { background: radial-gradient(50rem 30rem at 80% 30%, rgba(216, 178, 94, 0.12), transparent 70%); }
.sc-hero__title { font-weight: 450; }
.sc-tabs__list { background: var(--muted); }
#sc-web:checked ~ .sc-tabs__list [for="sc-web"],
#sc-crm:checked ~ .sc-tabs__list [for="sc-crm"],
#sc-doc:checked ~ .sc-tabs__list [for="sc-doc"] { background: var(--surface); box-shadow: 0 0 0 1px var(--line); }
#sc-web:focus-visible ~ .sc-tabs__list [for="sc-web"],
#sc-crm:focus-visible ~ .sc-tabs__list [for="sc-crm"],
#sc-doc:focus-visible ~ .sc-tabs__list [for="sc-doc"] { outline-color: var(--accent); }
.sc-panel { border: 1px solid var(--line); }
.sc-win { background: var(--ui-bg); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8); }

.tile, .faq details, .contact__card, .product__visual { border: 1px solid var(--line); }
.tile--dark { background: linear-gradient(160deg, #2e2716, #1a1814 70%); }
.tile--dark .focus strong { color: var(--accent); }
.section--muted { border-block: 1px solid var(--line); }
.steps li::before { background: var(--accent); color: var(--accent-ink); }
.product__link { color: var(--accent); }
.section--contact { border-top: 1px solid var(--line); }
.footer { border-top: 1px solid var(--line); }