@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Rubik',sans-serif;background:linear-gradient(180deg,#12061e,#0a0412);color:#e0d8f0;line-height:1.65;min-height:100vh}
a{color:#b388ff;text-decoration:none}a:hover{color:#d4b8ff}

.container{max-width:1100px;margin:0 auto;padding:0 20px}
header{padding:14px 0;display:flex;align-items:center;justify-content:space-between}
.logo{font-size:1.15rem;font-weight:800;color:#b388ff;text-decoration:none;letter-spacing:-.3px}
.logo span{color:#5a4878;font-weight:600}
header nav a{font-size:.74rem;font-weight:600;color:#7a6898;margin-left:8px;text-decoration:none}
header nav a:hover{color:#e0d8f0}

.hero{padding:40px 0 24px;text-align:center}
.hero h1{font-size:clamp(1.5rem,4vw,2.4rem);font-weight:800;color:#fff}
.hero h1 em{font-style:normal;color:#b388ff}
.hero p{font-size:.88rem;color:#7a6898;max-width:460px;margin:6px auto 0}

.row{padding:18px 0}
.row-title{font-size:.92rem;font-weight:700;color:#b388ff;margin-bottom:12px;text-transform:uppercase;letter-spacing:.5px}
.carousel{display:flex;gap:14px;overflow-x:auto;padding-bottom:10px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:#2a1848 transparent}
.slide{min-width:260px;max-width:260px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);border-radius:12px;overflow:hidden;flex-shrink:0;scroll-snap-align:start;transition:.2s}
.slide:hover{border-color:rgba(179,136,255,.3);transform:scale(1.02)}
.slide img{width:100%;height:150px;object-fit:cover}
.slide-bd{padding:12px}
.slide-bd h3{font-size:.88rem;font-weight:700;color:#fff;margin-bottom:2px}
.slide-bd .rate{font-size:.72rem;color:#b388ff;margin-bottom:4px}
.slide-bd p{font-size:.74rem;color:#7a6898;line-height:1.4;margin-bottom:8px}
.sl-tags{display:flex;gap:3px;margin-bottom:6px}
.sl-tags span{font-size:.56rem;font-weight:700;padding:2px 6px;border-radius:6px}
.st-g{background:rgba(81,207,102,.1);color:#51cf66}
.st-p{background:rgba(179,136,255,.1);color:#b388ff}
.dl-btn{display:inline-flex;align-items:center;gap:3px;font-size:.7rem;font-weight:700;padding:5px 12px;border-radius:6px;background:#b388ff;color:#12061e;text-decoration:none}
.dl-btn:hover{background:#c9a4ff;color:#12061e}

/* Detail page */
.det-back{font-size:.78rem;color:#b388ff;display:inline-block;margin:20px 0 16px;text-decoration:none}
.det-back:hover{text-decoration:underline}
.det h1{font-size:1.4rem;font-weight:800;color:#fff;margin-bottom:6px}
.det .subtitle{font-size:.88rem;color:#7a6898;margin-bottom:18px}
.rev{background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:16px;margin-bottom:16px}
.rev h3{font-size:.95rem;font-weight:700;color:#fff;margin-bottom:3px}
.rev .gallery{display:flex;gap:6px;overflow-x:auto;margin:8px 0}
.rev .gallery img{width:140px;height:92px;border-radius:6px;object-fit:cover;border:1px solid rgba(255,255,255,.06);flex-shrink:0}
.rev>p{font-size:.82rem;color:#9a8ab8;margin:8px 0}
.rev .rate{font-size:.8rem;color:#b388ff;margin-bottom:8px}
.rev .pro,.rev .con{margin-bottom:6px}
.rev .pro h4{font-size:.64rem;color:#51cf66;text-transform:uppercase;margin-bottom:2px}
.rev .con h4{font-size:.64rem;color:#ff6b6b;text-transform:uppercase;margin-bottom:2px}
.rev li{font-size:.76rem;color:#8a7aaa;list-style:none;padding-left:12px;position:relative}
.rev .pro li::before{content:"\2713";position:absolute;left:0;color:#51cf66;font-size:.62rem}
.rev .con li::before{content:"\2717";position:absolute;left:0;color:#ff6b6b;font-size:.62rem}
.rev ul{padding:0}
.verd{border:1px solid rgba(179,136,255,.2);border-radius:10px;padding:14px;margin:14px 0;background:rgba(179,136,255,.04)}
.verd h3{font-size:.82rem;color:#b388ff;margin-bottom:2px}
.verd p{font-size:.8rem;color:#8a7aaa}

footer{border-top:1px solid rgba(255,255,255,.04);padding:18px 0;text-align:center;font-size:.64rem;color:#3a2858}
footer a{color:#5a4878;margin:0 5px;text-decoration:none}

.lp{max-width:600px;margin:0 auto;padding:30px 20px 50px}
.lp h1{font-size:1.2rem;font-weight:800;color:#fff;margin-bottom:14px}
.lp h2{font-size:.88rem;font-weight:700;color:#b388ff;margin:14px 0 4px}
.lp p,.lp li{font-size:.8rem;color:#7a6898;margin-bottom:5px}
.lp ul{padding-left:14px}

@media(max-width:600px){.slide{min-width:220px;max-width:220px}}