/* Shared base for the demo websites. Each demo sets its own colours and fonts in its page. */
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
svg.lucide { display:block; }
/* Icons inside buttons and badges stay text-sized. */
.btn svg, .pill svg { width:18px; height:18px; flex:none; }
.wrap { max-width:1160px; margin:0 auto; padding:0 20px; }

/* "This is a demo" bar: always visible, so nobody mistakes a demo for a real business. */
.demo-bar { position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  padding:8px 16px; background:#0b0f1a; color:#fff; font:500 13px/1.4 system-ui,sans-serif; text-align:center; }
.demo-bar b { color:#7aa5ff; }
.demo-bar a { background:#1463ff; color:#fff; padding:4px 12px; border-radius:999px; font-weight:600; white-space:nowrap; }
.demo-bar a:hover { background:#0b4fd6; }

.demo-made { padding:18px 20px; text-align:center; font:13px system-ui,sans-serif; background:#0b0f1a; color:#c9d0de; }
.demo-made a { color:#7aa5ff; font-weight:600; }

.toast { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; pointer-events:none; z-index:60;
  background:#0b0f1a; color:#fff; padding:12px 18px; border-radius:12px; font:500 14px system-ui,sans-serif; transition:.25s; max-width:calc(100% - 32px); text-align:center; }
.toast.show { opacity:1; transform:translate(-50%,0); }

@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } * { transition:none !important; } }