:root{
  --bg: #050607;
  --panel: rgba(255,255,255,.04);
  --stroke: rgba(255,255,255,.10);
  --text: #f2f4f7;
  --muted: rgba(242,244,247,.62);
  --accent: #581280;
  --accent-dark: #581280;
  --shadow: rgba(0,0,0,.65);
}
.demo-overlay{
  position: fixed;
  z-index: 9999;
  width: 100vw;
  height: 100vh;
  top: 0; left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  overflow-y: auto;
  background:
    radial-gradient(900px 520px at 50% 10%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(900px 520px at 50% 110%, rgba(0,0,0,.55), transparent 55%),
    linear-gradient(180deg, #050607, #0b0d10);
}
.demo-container{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 400px;

  padding: 14px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 6px, rgba(0,0,0,.02) 6px 12px),
    repeating-linear-gradient(-45deg, rgba(255,255,255,.012) 0 6px, rgba(0,0,0,.018) 6px 12px);
  border: 1px solid var(--stroke);

  box-shadow:
    0 18px 55px var(--shadow),
    0 0 0 1px rgba(0,0,0,.45) inset;
}
.demo-logo {
    width: 180px;
    max-width: 70%;
    margin: 0 auto 15px;
    display: block;
}
.demo-banner{
  width: 100%;
  border-radius: 12px;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    0 10px 35px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.35) inset;
}
.demo-buttons{
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  margin-bottom: 16px;
}
.demo-btn{
  flex: 1;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
  border-radius: 6px;
  text-align: center;
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    repeating-linear-gradient(45deg, rgba(255,255,255,.02) 0 5px, rgba(0,0,0,.02) 5px 10px);
  box-shadow:
    0 10px 22px rgba(0,0,0,.55),
    0 0 0 1px rgba(0,0,0,.35) inset;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.demo-btn:hover{
  transform: translateY(-1px);
  border-color: rgba(209,24,24,.35);
  box-shadow:
    0 14px 28px rgba(0,0,0,.62),
    0 0 0 1px rgba(209,24,24,.20) inset;
}
.demo-cta{
  width: 100%;
  height: 44px;
  line-height: 44px;
  font-size: 16px;
  border-radius: 6px;
  text-align: center;
  color: #fff;
  font-weight: 900;
  text-decoration: none;
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  letter-spacing: .2px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.02)),
    linear-gradient(90deg, var(--accent), var(--accent-dark));
  box-shadow:
    0 12px 26px rgba(0,0,0,.58),
    0 0 0 1px rgba(0,0,0,.35) inset;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.demo-cta:hover{
  transform: translateY(-1px);
  filter: brightness(1.03) saturate(1.03);
  box-shadow:
    0 16px 32px rgba(0,0,0,.66),
    0 0 0 1px rgba(255,255,255,.10) inset;
}
.demo-footer{
  margin-top: 16px;
  font-size: 12px;
  color: var(--muted);
  text-align: center;
}
.demo-footer span{
  color: rgba(242,244,247,.92);
  font-weight: 800;
}