.demos{background:var(--bg)}.demos-header{margin-bottom:64px}.demos-header .section-sub{max-width:560px}.demos-grid{grid-template-columns:repeat(3,1fr);gap:24px;display:grid}.demo-card{border:1px solid var(--border);border-radius:var(--radius-lg);background:var(--bg);transition:all .28s;overflow:hidden}.demo-card:hover{border-color:var(--border-alt)}.demo-browser-bar{background:var(--bg-alt);border-bottom:1px solid var(--border);align-items:center;gap:10px;padding:8px 14px;display:flex}.demo-dots{gap:5px;display:flex}.demo-dots span{border-radius:50%;width:9px;height:9px;display:block}.demo-url{color:var(--text-3);background:var(--bg);border:1px solid var(--border);text-align:center;border-radius:4px;flex:1;max-width:180px;margin:0 auto;padding:3px 8px;font-size:11px}.demo-screen{overflow:hidden}.dsite-nav{align-items:center;gap:10px;padding:8px 14px;display:flex}.dsite-logo{opacity:.9;border-radius:3px;width:50px;height:7px}.dsite-links{flex:1;gap:8px;display:flex}.dsite-link{background:#ffffff26;border-radius:3px;width:28px;height:5px}.dsite-hero{flex-direction:column;gap:8px;padding:18px 14px;display:flex}.dsite-h1{background:#fffc;border-radius:3px;width:80%;height:10px}.dsite-h2{background:#ffffff59;border-radius:3px;width:60%;height:7px}.dsite-btn{opacity:.95;border-radius:4px;width:72px;height:22px;margin-top:4px}.dsite-cards{grid-template-columns:repeat(3,1fr);gap:6px;padding:0 14px 14px;display:grid}.dsite-card{background:#ffffff0d;border-radius:6px;flex-direction:column;gap:5px;padding:8px;display:flex}.dsite-card-dot{opacity:.9;border-radius:4px;width:14px;height:14px}.dsite-card-line{background:#fff3;border-radius:3px;width:100%;height:5px}.demo-info{padding:20px 22px 24px}.demo-industry{letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:6px;font-size:11px;font-weight:700}.demo-name{color:var(--text);letter-spacing:-.3px;margin-bottom:6px;font-size:17px;font-weight:700}.demo-desc{color:var(--text-2);font-size:14px;line-height:1.55}@media (max-width:900px){.demos-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto}.demos-header{text-align:center}.demos-header .section-sub{margin:0 auto}}.demo-screen-img{position:relative;overflow:hidden}.demo-screenshot{width:100%;height:auto;display:block}.demo-tags{flex-wrap:wrap;gap:6px;margin-top:12px;display:flex}.demo-tag{letter-spacing:.02em;background:0 0;border:1px solid;border-radius:99px;padding:3px 10px;font-size:11px;font-weight:600}
