:root{
  --bg:#0b0d12; --panel:#121622; --muted:#a9b0c0; --text:#e8ecf5; --primary:#6e7dff;
  --accent:#ff5ea3; --accent2:#f68b1f; --ok:#28c281; --danger:#ff4d4f; --ring: 0 0 0 3px rgba(110,125,255,.25);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background: radial-gradient(1200px 600px at 20% -10%, #1a1f33 0, transparent 60%), radial-gradient(1000px 400px at 120% 0, #231a2b 0, transparent 60%), var(--bg); color:var(--text); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial; line-height:1.5}
a{color:var(--text); text-decoration:none}
.container{width:min(1100px,90%); margin:0 auto}
.narrow{width:min(800px,90%); margin:0 auto}
.small{font-size:.9rem} .muted{color:var(--muted)}
.mt{margin-top:1rem}
.row{display:flex; align-items:center} .gap>*{margin-right:.75rem}
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
@media (max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr)} .grid-3,.grid-2{grid-template-columns:1fr}}
header.site-header{position:sticky; top:0; z-index:10; backdrop-filter:saturate(140%) blur(10px); background:rgba(10,12,20,.6); border-bottom:1px solid rgba(255,255,255,.06)}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px}
.brand{display:flex; align-items:center; font-weight:800; font-size:1.25rem}
.brand-icon{margin-right:.5rem}
.brand .dot{color:var(--accent)}
.nav a{margin:0 .6rem; opacity:.9}
.auth .btn{margin-left:.5rem}
.btn{display:inline-flex; align-items:center; justify-content:center; padding:.6rem 1rem; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.04); color:var(--text); cursor:pointer; transition:.2s ease; box-shadow:none}
.btn:hover{transform:translateY(-1px)}
.btn:focus{outline:none; box-shadow:var(--ring)}
.btn.primary{background: linear-gradient(90deg, var(--accent), var(--primary)); border-color:transparent}
.btn.danger{background: linear-gradient(90deg, #ff6b6b, #c52d3a); border-color:transparent}
.btn.ghost{background:transparent}
.btn-lg{padding:.9rem 1.3rem; font-size:1.1rem}
.page{padding-bottom:60px}
.hero{padding:80px 0; background: radial-gradient(600px 300px at 80% -10%, rgba(255,94,163,.15), transparent 60%)}
.hero-inner{display:flex; flex-direction:column; align-items:flex-start; gap:14px}
.hero h1{font-size:3rem; line-height:1.1; margin:0}
.grad{background:linear-gradient(90deg, var(--accent), var(--primary)); -webkit-background-clip:text; background-clip:text; color:transparent}
.sub{opacity:.9}
.badges{display:flex; gap:16px; padding:0; margin:16px 0 0; list-style:none}
.badges li{padding:.4rem .7rem; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08)}
.features .card{background:var(--panel); padding:18px; border-radius:16px; border:1px solid rgba(255,255,255,.08)}
.card-icon{font-size:1.6rem}
.preview .call-ui{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:20px 0}
.video-box{background:#080a12; border-radius:12px; border:1px dashed rgba(255,255,255,.12); padding:80px 0; text-align:center; color:var(--muted)}
.site-footer{border-top:1px solid rgba(255,255,255,.08); padding:30px 0 40px; background:#0b0d12}
.footer-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:24px}
.brand-foot{font-weight:800; font-size:1.2rem; margin-bottom:8px}
.copy{margin-top:20px; text-align:center}
/* Age gate */
.age-body{display:grid; place-items:center; height:100vh; background:var(--bg)}
.age-card{width:min(560px,92%); background:var(--panel); padding:28px; border-radius:20px; border:1px solid rgba(255,255,255,.08)}
.row.gap>*{margin-right:.6rem}
/* Forms */
.form{display:grid; gap:12px; background:var(--panel); padding:18px; border:1px solid rgba(255,255,255,.08); border-radius:14px}
input[type=text],input[type=password],input[type=email],textarea,.input-inline{width:100%; padding:.7rem .9rem; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:#0c111b; color:var(--text)}
.checkbox{display:flex; gap:8px; align-items:flex-start}
/* Profiles */
.profile-card{display:flex; gap:12px; padding:12px; background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:14px}
.avatar{width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg, var(--accent), var(--primary)); display:grid; place-items:center; font-weight:700; font-size:1.1rem}
.avatar::after{content:attr(data-name); filter:brightness(1.1); color:white}
.badge{padding:.15rem .45rem; border-radius:999px; font-size:.8rem; border:1px solid rgba(255,255,255,.15)}
.online{background:rgba(40,194,129,.15); border-color:rgba(40,194,129,.25)}
/* Chat */
.chat-layout{display:grid; grid-template-columns:260px 1fr; gap:14px}
.chat-sidebar{background:var(--panel); padding:14px; border-radius:14px; border:1px solid rgba(255,255,255,.08)}
.chat-main{display:flex; flex-direction:column; background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:14px}
.messages{flex:1; overflow:auto; padding:14px}
.bubble{max-width:80%; padding:.6rem .8rem; border-radius:14px; margin:.3rem 0}
.bubble.me{margin-left:auto; background:linear-gradient(90deg, var(--primary), var(--accent));}
.bubble.them{background:#0e1421; border:1px solid rgba(255,255,255,.08)}
.chat-input{display:flex; gap:8px; padding:10px; border-top:1px solid rgba(255,255,255,.08)}
/* Call */
.call-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.vbox{width:100%; height:340px; background:#000; border-radius:12px; border:1px solid rgba(255,255,255,.12)}
.sdp{width:100%; height:140px; background:#0c111b; color:#dbe2ff; border:1px solid rgba(255,255,255,.12); border-radius:12px; padding:.6rem}
/* Modal */
.modal{position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.55)}
.modal.hidden{display:none}
.modal-card{background:var(--panel); border:1px solid rgba(255,255,255,.08); border-radius:16px; padding:20px; width:min(520px,92%)}
/* Footer tweaks */
h4{margin:.3rem 0}
ul{padding-left:18px}
hr{border:0; border-top:1px solid rgba(255,255,255,.08)}