.demos-section{background:#f4f5f8;overflow:hidden}.demos-heading{align-items:end}.motion-demo{display:grid;grid-template-columns:minmax(220px,.68fr) minmax(0,1.32fr);gap:34px;align-items:center;margin:0 0 24px;padding:28px;border-radius:30px;background:#11131a;color:#fff;box-shadow:0 24px 60px rgba(12,17,30,.18)}.motion-demo-copy small{display:block;margin-bottom:13px;color:#7e9aff;font-size:11px;font-weight:900;letter-spacing:.15em}.motion-demo-copy h3{max-width:420px;margin:0;font-size:clamp(28px,3vw,44px);line-height:.98;letter-spacing:-.05em}.motion-demo-copy p{max-width:470px;margin:18px 0 0;color:#b7bbc7;font-size:15px;line-height:1.65}.motion-demo-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.motion-demo-meta span{padding:8px 10px;border:1px solid rgba(255,255,255,.16);border-radius:99px;color:#eceef5;font-size:11px;font-weight:750}.motion-demo-stages{display:grid;grid-template-columns:minmax(0,1fr) 34px minmax(0,1fr);gap:10px;align-items:center}.motion-demo-stages figure{position:relative;margin:0;overflow:hidden;border-radius:20px;background:#222631;aspect-ratio:4/5}.motion-demo-stages img,.motion-demo-stages video{display:block;width:100%;height:100%;object-fit:cover}.motion-demo-stages figcaption{position:absolute;left:12px;bottom:12px;padding:8px 10px;border-radius:99px;background:rgba(10,12,18,.74);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);font-size:10px;font-weight:850;letter-spacing:.06em}.motion-arrow{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#1648ff;font-size:18px;font-weight:900}.demo-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:18px}.demo-card{grid-column:span 4;background:#fff;border:1px solid rgba(15,20,35,.1);border-radius:28px;overflow:hidden;box-shadow:0 18px 45px rgba(23,30,55,.08);transition:transform .25s ease,box-shadow .25s ease}.demo-card:hover{transform:translateY(-5px);box-shadow:0 25px 55px rgba(23,30,55,.13)}.demo-visual{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:#e7eaf0}.demo-visual:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,14,25,.22),transparent 24%,transparent 75%,rgba(10,14,25,.12));pointer-events:none}.demo-visual img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .6s ease}.demo-card:hover .demo-visual img{transform:scale(1.018)}.demo-tag{position:absolute;z-index:2;top:18px;padding:9px 12px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.04em;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.demo-tag-before{left:16px;color:#161925;background:rgba(255,255,255,.88)}.demo-tag-after{right:16px;color:#fff;background:rgba(22,72,255,.88)}.demo-copy{display:flex;flex-direction:column;gap:16px;padding:24px 24px 26px}.demo-copy small{display:block;margin-bottom:8px;color:#1648ff;font-size:10px;font-weight:900;letter-spacing:.15em}.demo-copy h3{margin:0;font-size:clamp(20px,2vw,28px);line-height:1.04;letter-spacing:-.04em}.demo-copy p{margin:0;color:#656a77;font-size:14px;line-height:1.6}.demo-footer{display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:28px;padding:24px 28px;border:1px solid rgba(15,20,35,.1);border-radius:22px;background:rgba(255,255,255,.6)}.demo-footer p{max-width:680px;margin:0;color:#656a77;font-size:13px;line-height:1.55}.demo-footer strong{color:#181b26}.demo-footer .btn{flex:none}@media(max-width:900px){.motion-demo{grid-template-columns:1fr}.demo-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.demo-card{grid-column:span 1}.demo-card-featured{grid-column:span 2}.demo-card-featured .demo-visual{aspect-ratio:16/10}.demo-footer{align-items:flex-start;flex-direction:column}}@media(max-width:620px){.demos-heading{align-items:start}.motion-demo{padding:20px}.motion-demo-stages{grid-template-columns:1fr}.motion-demo-stages figure{aspect-ratio:4/5}.motion-arrow{margin:-2px auto;transform:rotate(90deg);z-index:2}.demo-grid{grid-template-columns:1fr}.demo-card,.demo-card-featured{grid-column:1}.demo-card-featured .demo-visual,.demo-visual{aspect-ratio:4/5}.demo-tag{top:12px;padding:8px 10px;font-size:9px}.demo-tag-before{left:10px}.demo-tag-after{right:10px}.demo-copy{padding:20px}.demo-footer{padding:20px}.demo-footer .btn{width:100%;justify-content:center}}