.demos{

padding:140px 8%;

background:#060B0F;

}

.demos-container{

max-width:1200px;
margin:auto;

}

.demos-title{

font-size:2.2rem;

margin-bottom:16px;

}

.demos-intro{

max-width:540px;

color:var(--text-soft);

margin-bottom:70px;

}

.demos-grid{

display:grid;

grid-template-columns:repeat(3,1fr);

gap:40px;

}

.demo-card{

background:rgba(255,255,255,.02);

border:1px solid var(--border-soft);

border-radius:14px;

padding:26px;

transition:all .35s var(--transition);

}

.demo-card:hover{

transform:translateY(-8px);

border-color:rgba(38,166,154,.35);

}

.demo-image{

overflow:hidden;

border-radius:10px;

margin-bottom:18px;

}

.demo-image img{

width:100%;

transition:transform .6s ease;

}

.demo-card:hover img{

transform:scale(1.05);

}

.demo-card h3{

margin-bottom:10px;

}

.demo-card p{

color:var(--text-soft);

margin-bottom:18px;

}

.demo-link{

color:var(--accent);

text-decoration:none;

font-size:.9rem;

position:relative;

}

.demo-link::after{

content:"";

position:absolute;

left:0;
bottom:-3px;

width:0%;
height:1px;

background:var(--accent);

transition:width .3s ease;

}

.demo-link:hover::after{

width:100%;

}

.demos-note{

margin-top:70px;

font-size:.9rem;

color:var(--text-soft);

max-width:520px;

}

.demo-card{

display:block;

background:rgba(255,255,255,.02);

border:1px solid var(--border-soft);

border-radius:16px;

padding:24px;

text-decoration:none;

color:inherit;

transition:all .4s var(--transition);

position:relative;

overflow:hidden;

}

.demo-card:hover{

transform:translateY(-10px);

border-color:rgba(38,166,154,.35);

box-shadow:0 20px 50px rgba(0,0,0,.4);

}

.demo-image{

height:180px;

overflow:hidden;

border-radius:10px;

margin-bottom:18px;

position:relative;

}

.demo-image img{

width:100%;

position:absolute;

top:0;

transition:transform 6s ease;

}

.demo-card:hover .demo-image img{

transform:translateY(-40%);

}

.demo-content h3{

margin-bottom:10px;

}

.demo-content p{

color:var(--text-soft);

margin-bottom:14px;

}

.demo-link{

color:var(--accent);

font-size:.9rem;

position:relative;

}

.demo-link::after{

content:"";

position:absolute;

bottom:-3px;
left:0;

width:0%;
height:1px;

background:var(--accent);

transition:width .3s ease;

}

.demo-card:hover .demo-link::after{

width:100%;

}

.demo-card{

opacity:0;

transform:translateY(30px);

}

.demo-visible{

opacity:1;

transform:translateY(0);

transition:all .8s ease;

}

.demos{

padding:160px 8%;

}

.demo-card{
  position:relative;
  overflow:hidden;
}

.demo-card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(
    220px circle at var(--x, 50%) var(--y, 50%),
    rgba(38,166,154,.12),
    transparent 40%
  );
  opacity:0;
  transition:opacity .25s ease;
  pointer-events:none;
}

.demo-card:hover::before{
  opacity:1;
}

.demo-chip{
  position:absolute;
  top:14px;
  left:14px;

  font-size:.7rem;
  letter-spacing:.5px;

  padding:6px 10px;

  border-radius:999px;

  background:rgba(38,166,154,.15);
  color:var(--accent);
}

.demo-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
}

.demo-card:hover .demo-link{
  transform:translateX(4px);
}

.demos-note{

margin-top:80px;
padding-top:30px;

border-top:1px solid rgba(255,255,255,.05);

max-width:520px;

}

.demo-card{

transition:
transform .25s ease,
box-shadow .25s ease;

will-change:transform;

}

.demos-intro{

max-width:720px;

}

.demos-intro{

max-width:720px;

margin-bottom:80px;

}

.demos-title{

font-size:2.2rem;

max-width:720px;

}

.demos-note{

max-width:720px;

}
.demos{

padding:140px 8%;

}