*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,sans-serif;background:#0b0d17;color:#e7e9f3}a{color:inherit;text-decoration:none}
header{display:flex;justify-content:space-between;align-items:center;padding:18px 6vw}.logo{font-weight:800;font-size:22px}.logo span{color:#8b7bff}nav{display:flex;gap:14px;align-items:center}
.btn,.btn-o,button{border-radius:10px;padding:10px 16px;font-weight:600;cursor:pointer;border:0;font-size:14px}.btn,form button{background:linear-gradient(90deg,#7c5cff,#22c1ee);color:#fff}.btn-o{border:1px solid #3a3f5c}
.hero{text-align:center;padding:60px 6vw 40px;background:radial-gradient(circle at 50% 0,#2a1f66 0,transparent 60%)}h1{font-size:clamp(32px,5vw,56px);margin:0 0 14px;line-height:1.1}h1 em{font-style:normal;background:linear-gradient(90deg,#a78bfa,#22d3ee);-webkit-background-clip:text;color:transparent}.hero p{color:#a3a8c3}
form{display:flex;max-width:680px;margin:26px auto 16px;background:#161a2e;border:1px solid #2c3150;border-radius:14px;padding:6px}form input{flex:1;background:none;border:0;color:#fff;font-size:17px;padding:12px}form input:focus{outline:none}
#chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;max-width:800px;margin:auto}.chip,.catb{background:#161a2e;color:#c9cde4;border:1px solid #2c3150;font-weight:500}.chip:hover,.catb.on{border-color:#8b7bff;color:#fff;background:#231d4d}
main{padding:0 6vw 40px}h2{margin:36px 0 16px}#cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px;text-transform:capitalize}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px}.card{position:relative;background:#121527;border:1px solid #23284a;border-radius:14px;padding:18px;display:flex;flex-direction:column}.card:hover{border-color:#5b4fcf}
.rank{position:absolute;top:12px;right:14px;color:#8b7bff;font-weight:800}.top{display:flex;gap:12px;align-items:center}.top img{width:36px;height:36px;border-radius:8px;background:#fff}.card h3{margin:0 0 4px;font-size:17px}
.tag,.cat{font-size:11px;padding:2px 8px;border-radius:99px;margin-right:6px;text-transform:uppercase}.free{background:#0f3d2a;color:#5be3a0}.freemium{background:#10304a;color:#6cc6ff}.paid{background:#43251a;color:#ffaa7a}.cat{background:#22264a;color:#b5b9dc}
.card p{color:#a3a8c3;font-size:14px;line-height:1.5}.why{color:#7ee2b8!important;font-size:13px!important}.go{margin-top:auto;color:#a78bfa;font-weight:600}
.cta{margin-top:50px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;padding:28px;border-radius:16px;background:linear-gradient(90deg,#1e1747,#0f2a3a)}.cta h3{margin:0}.cta p{color:#a3a8c3;margin:6px 0 0}
footer{text-align:center;color:#6b7090;padding:30px;font-size:13px}