/* ===== Zave Digital — Demos Page ===== */
:root{
  --bg:#0a0a14; --bg2:#12121f; --card:#16162a;
  --purple:#7c3aed; --purple2:#a855f7; --cyan:#22d3ee; --blue:#3b82f6;
  --txt:#e8e8f0; --muted:#9aa0b5; --line:rgba(255,255,255,.08);
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Segoe UI',system-ui,sans-serif;background:var(--bg);color:var(--txt);line-height:1.6}
a{text-decoration:none;color:inherit}
.gradient-text{background:linear-gradient(90deg,var(--cyan),var(--purple2));-webkit-background-clip:text;background-clip:text;color:transparent}

/* navbar (reuse) */
.navbar{position:sticky;top:0;z-index:50;background:rgba(10,10,20,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-container{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;padding:14px 20px}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:1.2rem}
.logo-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,var(--purple),var(--cyan));display:flex;align-items:center;justify-content:center;color:#fff;font-weight:900}
.logo span{color:var(--purple2)}
.nav-links{display:flex;gap:22px;list-style:none}
.nav-links a{color:var(--muted);font-weight:600;font-size:.95rem;transition:.2s}
.nav-links a:hover,.nav-links a.active{color:#fff}
.btn-primary{background:linear-gradient(90deg,var(--blue),var(--cyan));color:#fff;padding:10px 18px;border-radius:50px;font-weight:700;display:inline-flex;align-items:center;gap:8px;transition:.2s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(34,211,238,.3)}
.nav-cta{padding:9px 16px;font-size:.9rem}

/* hero */
.demo-hero{max-width:900px;margin:50px auto 20px;text-align:center;padding:0 20px}
.demo-hero h1{font-size:2.4rem;margin-bottom:14px}
.demo-hero p{color:var(--muted);font-size:1.05rem}
.demo-search{margin-top:24px;max-width:520px;margin-left:auto;margin-right:auto}
.demo-search input{width:100%;padding:14px 18px;border-radius:50px;border:1px solid var(--line);background:var(--bg2);color:#fff;font-size:1rem;outline:none}
.demo-search input:focus{border-color:var(--cyan)}

/* filters */
.demo-filters{max-width:1100px;margin:30px auto;padding:0 20px;display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.demo-filter{background:var(--bg2);border:1px solid var(--line);color:var(--muted);padding:9px 16px;border-radius:50px;font-weight:600;cursor:pointer;transition:.2s;font-size:.9rem}
.demo-filter:hover{color:#fff;border-color:var(--purple2)}
.demo-filter.active{background:linear-gradient(90deg,var(--purple),var(--cyan));color:#fff;border-color:transparent}

/* grid */
.demo-grid{max-width:1200px;margin:20px auto 60px;padding:0 20px;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}
.demo-card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;display:flex;flex-direction:column;gap:12px;transition:.25s}
.demo-card:hover{transform:translateY(-4px);border-color:var(--purple2);box-shadow:0 10px 30px rgba(124,58,237,.2)}
.demo-icon{font-size:2.2rem}
.demo-card h3{font-size:1.15rem;color:#fff}
.demo-desc{color:var(--muted);font-size:.92rem;flex:1}
.demo-btn{justify-content:center;margin-top:4px;font-size:.92rem;padding:11px 14px}

/* ===== CSS-only demo visuals ===== */
.demo-visual{background:var(--bg2);border:1px dashed var(--line);border-radius:12px;padding:14px;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:90px;justify-content:center;text-align:center;font-size:.85rem;color:var(--muted)}
.demo-visual span{color:#fff;font-weight:600}
.demo-visual small{color:var(--muted)}
/* phone lock->unlock */
.demo-visual.phone{flex-direction:row;gap:6px}
.dv-screen{flex:1;padding:14px 6px;border-radius:8px;text-align:center;font-weight:700;font-size:.8rem}
.dv-screen.locked{background:#3a1010;color:#ff6b6b;border:1px solid #ff6b6b55}
.dv-screen.unlocked{background:#0d3a1a;color:#4ade80;border:1px solid #4ade8055}
.dv-arrow{color:var(--cyan);font-size:1.2rem;align-self:center}
/* social post */
.demo-visual.post{text-align:left;gap:0}
.dv-post-head{font-weight:700;color:#fff;margin-bottom:6px}
.dv-post-body{font-size:.82rem;color:var(--muted);margin-bottom:8px}
.dv-post-foot{font-size:.8rem;color:var(--cyan)}
/* website mock */
.demo-visual.site{gap:4px}
.dv-bar{background:#1e1e3a;color:var(--cyan);font-size:.78rem;padding:6px;border-radius:6px;width:100%}
.dv-page{background:#0d0d1f;border-radius:6px;padding:10px;width:100%;font-size:.8rem;color:var(--muted)}
.dv-page span{color:#fff}
/* logo */
.demo-visual.logo .dv-logo{font-size:1.8rem;font-weight:900;color:var(--purple2);letter-spacing:2px}

/* footer */
.demo-footer{text-align:center;padding:30px 20px 50px;color:var(--muted);border-top:1px solid var(--line);font-size:.9rem}
.demo-footer p{margin:6px 0}

/* mobile */
@media(max-width:768px){
  .nav-links{display:none}
  .demo-hero h1{font-size:1.7rem}
  .demo-grid{grid-template-columns:1fr;gap:16px;padding:0 14px}
  .demo-card{padding:18px}
}