/* =========================================================
   ONYXARRO — CONCEPT DEMO CHROME
   Shared demo bar, concept badge, back-to-concepts, footer.
   Linked from every /demos/* page so the demo framing is
   consistent regardless of the niche-specific theme below.
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

*{box-sizing:border-box;margin:0;padding:0}
html,body{font-family:'Inter',-apple-system,'Helvetica Neue',Arial,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{overflow-x:hidden;min-height:100vh;line-height:1.55}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}

/* ---------- DEMO TOP BAR (sticky) ---------- */
.demo-bar{
  position:relative;z-index:60;
  background:#0d1a28;color:#e2e8f0;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:13px;
}
.demo-bar-inner{
  max-width:1280px;margin:0 auto;padding:10px 24px;
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
}
.demo-bar-label{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  color:#cfe8fb;
}
.demo-bar-label::before{
  content:'';width:7px;height:7px;border-radius:50%;
  background:linear-gradient(90deg,#0ea5e9,#9333ea);
  box-shadow:0 0 10px rgba(14,165,233,.7);
}
.demo-bar-msg{color:rgba(255,255,255,.72);font-size:13px}
.demo-bar-cta{
  margin-left:auto;
  background:linear-gradient(90deg,#0ea5e9,#9333ea);
  color:#fff;font-weight:700;font-size:12px;
  padding:8px 14px;border-radius:999px;
  white-space:nowrap;
  transition:transform .2s ease,box-shadow .2s ease;
}
.demo-bar-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(14,165,233,.32)}
.demo-bar-back{font-size:12px;color:rgba(255,255,255,.55);font-weight:600}
.demo-bar-back:hover{color:#cfe8fb}
@media (max-width:720px){
  .demo-bar-msg{display:none}
  .demo-bar-inner{padding:9px 16px;gap:10px}
}

/* ---------- CONCEPT BADGE (top of hero) ---------- */
.concept-badge{
  display:inline-flex;align-items:center;gap:8px;
  font-size:10.5px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;
  padding:6px 12px;border-radius:999px;
  background:rgba(14,165,233,.1);
  border:1px solid rgba(14,165,233,.32);
  color:#0ea5e9;
}
.concept-badge::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:linear-gradient(90deg,#0ea5e9,#9333ea);
  box-shadow:0 0 8px rgba(14,165,233,.7);
}
/* dark variants */
.concept-badge.on-dark{color:#cfe8fb;background:rgba(14,165,233,.16);border-color:rgba(14,165,233,.4)}
.concept-badge.on-light{color:#0c4a6e;background:rgba(14,165,233,.08);border-color:rgba(14,165,233,.28)}

/* ---------- DEMO ONLY PILL (for disabled CTAs) ---------- */
.demo-only-tag{
  display:inline-block;margin-left:8px;
  font-size:9.5px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  background:rgba(255,193,7,.14);
  border:1px solid rgba(255,193,7,.4);
  color:#9a6b00;
  vertical-align:middle;
}
.demo-only-tag.on-dark{color:#ffd66b;background:rgba(255,193,7,.12);border-color:rgba(255,193,7,.36)}

/* ---------- DEMO FOOTER ---------- */
.demo-foot{
  background:#070d18;color:rgba(255,255,255,.72);
  padding:48px 24px 36px;
  border-top:1px solid rgba(255,255,255,.08);
}
.demo-foot-inner{max-width:980px;margin:0 auto;display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center}
.demo-foot-mark{
  font-size:11px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.demo-foot-mark .arro{
  background:linear-gradient(90deg,#0ea5e9,#9333ea);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.demo-disclaimer{
  font-size:13px;line-height:1.7;color:rgba(255,255,255,.6);
  max-width:62ch;
}
.demo-foot-links{
  display:flex;flex-wrap:wrap;gap:18px;justify-content:center;
  font-size:13px;font-weight:700;
}
.demo-foot-links a{
  color:#cfe8fb;border-bottom:1px solid transparent;padding-bottom:1px;
  transition:border-color .2s ease,color .2s ease;
}
.demo-foot-links a:hover{border-color:#0ea5e9;color:#fff}
.demo-foot-copy{font-size:11px;color:rgba(255,255,255,.4);letter-spacing:.4px;margin-top:4px}

/* ---------- BACK-TO-CONCEPTS FLOATING (mobile fallback) ---------- */
.demo-back-floating{
  position:fixed;bottom:18px;left:18px;z-index:55;
  font-size:11px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;
  padding:9px 14px;border-radius:999px;
  background:rgba(13,26,40,.85);color:#cfe8fb;
  border:1px solid rgba(14,165,233,.32);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 30px rgba(0,0,0,.32);
}
.demo-back-floating:hover{border-color:#0ea5e9;color:#fff}

/* ---------- BUTTON DISABLED FOR DEMO ---------- */
.demo-disabled{
  opacity:.6;cursor:not-allowed;pointer-events:none;
  filter:saturate(.6);
}