/* Shared base for Slobiq demo sites. CSP-safe: no inline styles, no external resources. */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;z-index:300;padding:10px 14px;border-radius:6px;background:#fff;color:#000}
.skip:focus{left:8px}

.demo-bar{position:relative;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:9px 5vw;background:#0f0e0d;color:#e9e4d8;font:12px/1.45 system-ui,-apple-system,'Segoe UI',sans-serif}
.demo-bar a{flex:none;color:#f3e2b3;font-weight:600;text-decoration:none;white-space:nowrap}
.demo-bar a:hover{text-decoration:underline}
.demo-bar span{opacity:.82}

.lang-select{padding:8px 12px;border:1px solid currentColor;border-radius:999px;background:transparent;font-size:13px;cursor:pointer}
.lang-select option{color:#111;background:#fff}

.toast{position:fixed;left:50%;bottom:22px;z-index:400;max-width:90vw;padding:13px 22px;border-radius:999px;background:#17120f;color:#fff;font:14px/1.4 system-ui,sans-serif;text-align:center;box-shadow:0 14px 44px #0007;opacity:0;pointer-events:none;transform:translate(-50%,20px);transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}

.js .reveal{opacity:0;transform:translateY(20px);transition:opacity .8s ease,transform .8s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}.toast{transition:none}}
@media (max-width:640px){.demo-bar{flex-direction:column;align-items:flex-start;gap:4px}}