/* FixPin: same family as the other project sites, with its own colour (blue and a yellow marker). */
:root { --accent:#2f5bd8; --accent-hover:#2748b3; --accent-ink:#fff; --accent-soft:rgba(47,91,216,.08); --accent-line:rgba(47,91,216,.28); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent:#8fa8ff; --accent-hover:#a6b9ff; --accent-ink:#0f1630; --accent-soft:rgba(143,168,255,.12); --accent-line:rgba(143,168,255,.35); } }
:root[data-theme="dark"] { --accent:#8fa8ff; --accent-hover:#a6b9ff; --accent-ink:#0f1630; --accent-soft:rgba(143,168,255,.12); --accent-line:rgba(143,168,255,.35); }
.fx-promo { padding: 56px 0; }
.fx-promo__box { border: 1px solid var(--accent-line); background: var(--accent-soft); border-radius: 20px; padding: 32px; display: grid; gap: 12px; }
.fx-promo__box h2 { margin: 0; }
.fx-promo__box .cta-row { justify-content: flex-start; }
.fx-get { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; }
.fx-get .fx-card h3 { margin-top: 8px; }
/* No flashlight scene here: keep the hero illustration, glow and cone visible in the dark theme too. */
:root[data-theme="dark"] .fx-glow, :root[data-theme="dark"] .fx-cone, :root[data-theme="dark"] .fx-hero__visual { opacity: 1; visibility: visible; filter: none; }