/* HERO */
.demo-hero{
  padding:80px 20px 40px;
  text-align:center;
}

.demo-hero h1{
  font-size:42px;
  font-weight:700;
  letter-spacing:-0.02em;
}

.demo-sub{
  color:#64748b;
  font-size:18px;
  max-width:720px;
  margin:14px auto 0;
}

/* VIDEO */
.demo-video-section{
  padding:20px 0 60px;
}

.demo-video-card{
  background:white;
  border-radius:18px;
  padding:18px;
  border:1px solid #e6eaf0;
  box-shadow:0 15px 40px rgba(0,0,0,.05);
}

.demo-video-card video{
  width:100%;
  border-radius:12px;
}

/* FEATURES */
.demo-content{
  padding:30px 0 80px;
}

.demo-feature{
  background:white;
  padding:26px;
  border-radius:16px;
  border:1px solid #e6eaf0;
  height:100%;
  transition:.25s;
}

.demo-feature:hover{
  transform:translateY(-4px);
  box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.demo-feature h5{
  font-weight:600;
  margin-bottom:8px;
}

.demo-feature p{
  color:#64748b;
}

/* CTA */
.demo-cta{
  margin-top:60px;
}

.demo-cta h3{
  font-weight:700;
}

.demo-cta p{
  color:#64748b;
  margin-bottom:18px;
}

.btn-demo{
  display:inline-block;
  padding:14px 28px;
  border-radius:12px;
  background:linear-gradient(135deg,#0ea5e9,#2563eb);
  color:white;
  font-weight:600;
  text-decoration:none;
  box-shadow:0 10px 25px rgba(37,99,235,.3);
}

.btn-demo:hover{
  opacity:.9;
}

/* MOBILE */
@media(max-width:768px){

  .demo-hero h1{
    font-size:28px;
  }

}