:root{--bg:#0b0b11;--fg:#eaeaf4;--muted:#b8b8c7;--card:#11111a;--accent-girl:#ff3cb4;--accent-man:#4696ff;--accent-trans:#b45aff}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif}
a{color:inherit;text-decoration:none}.container{max-width:1100px;margin:0 auto;padding:24px}
.hero{min-height:65vh;display:flex;align-items:center;justify-content:center;text-align:center;background:url('../assets/images/hero_bg.jpg') center/cover no-repeat}
.hero .inner{background:rgba(11,11,17,0.6);padding:22px 28px;border-radius:16px;border:1px solid rgba(255,255,255,0.08)}
h1{font-size:clamp(34px,6vw,64px);margin:0 0 8px}p{margin:0 0 12px}.muted{color:var(--muted)}
.btn{display:inline-block;padding:12px 18px;border-radius:12px;background:#1a1a26;border:1px solid rgba(255,255,255,0.1)}
.section{padding:40px 0}.grid{display:grid;gap:16px}.grid-3{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}}
.card{background:linear-gradient(180deg,#10101a,#0c0c14);border:1px solid rgba(255,255,255,0.06);border-radius:16px;overflow:hidden}
.card img{width:100%;height:360px;object-fit:cover;display:block}
.card .pad{padding:14px 16px}.badge{position:absolute;margin:12px;background:rgba(0,0,0,0.35);padding:6px 10px;border-radius:999px}
.chat{background:var(--card);border:1px solid rgba(255,255,255,0.06);border-radius:16px;min-height:180px;padding:12px}
.msg{background:#151522;border:1px solid rgba(255,255,255,0.06);margin:8px 0;padding:10px;border-radius:12px}
.msg.me{background:#0f1624}
.selector{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 14px}
.selector button{background:#14141e;border:1px solid rgba(255,255,255,0.1);color:#fff;border-radius:12px;padding:8px 12px;cursor:pointer}
.selector button.active{border-color:#fff}.voice{display:flex;gap:10px;align-items:center;margin-top:10px}
.brand-girl{color:var(--accent-girl)}.brand-man{color:var(--accent-man)}.brand-trans{color:var(--accent-trans)}
.footer{padding:24px 0;border-top:1px solid rgba(255,255,255,0.08);text-align:center;color:var(--muted)}