*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Poppins',sans-serif;background:#0b0b14;color:#fff;min-height:100vh;overflow-x:hidden}
a{color:#e63946;text-decoration:none}

/* TOP NAV */
.top-bar{position:fixed;top:0;left:0;right:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:14px 40px;background:rgba(0,0,0,.7);backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,.08)}
.top-bar .logo{font-size:22px;font-weight:700;letter-spacing:-.5px}
.top-bar .logo span{color:#e63946}
.nav-right{display:flex;align-items:center;gap:16px}
.online-count{font-size:13px;color:#6f6;display:flex;align-items:center;gap:6px}
.online-count .dot{width:8px;height:8px;background:#6f6;border-radius:50%;animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}
.login-toggle{display:flex;align-items:center;gap:8px;padding:9px 20px;border:1px solid rgba(230,57,70,.6);border-radius:50px;color:#fff;font-size:13px;font-weight:500;cursor:pointer;transition:all .25s}
.login-toggle:hover{background:#e63946;border-color:#e63946}
.login-toggle svg{width:15px;height:15px;fill:currentColor}

/* HERO WITH BG IMAGE */
.hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:90px 40px 40px}
.hero-bg{position:absolute;inset:0;background:url('../img/hero-bg.webp') center/cover no-repeat;z-index:0}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(10,10,20,.92) 0%,rgba(10,10,20,.75) 40%,rgba(10,10,20,.6) 70%,rgba(10,10,20,.85) 100%)}

.hero-inner{position:relative;z-index:1;display:flex;gap:60px;max-width:1140px;width:100%;margin:0 auto;align-items:center}

/* LEFT TEXT */
.hero-text{flex:1;max-width:520px}
.hero-text h1{font-size:44px;font-weight:800;line-height:1.15;margin-bottom:16px;letter-spacing:-.5px;text-shadow:0 2px 20px rgba(0,0,0,.5)}
.hero-text h1 .highlight{color:#e63946}
.hero-text .sub{font-size:16px;color:rgba(255,255,255,.85);line-height:2;margin-bottom:32px;font-weight:400;letter-spacing:.2px;text-shadow:0 1px 8px rgba(0,0,0,.4)}

.features{list-style:none;display:flex;flex-direction:column;gap:14px;margin-bottom:36px}
.features li{display:flex;align-items:center;gap:12px;font-size:14px;color:rgba(255,255,255,.8)}
.features li .check{color:#e63946;font-size:16px;font-weight:700}

/* PROFILE CARDS */
.members-preview{display:flex;gap:12px;flex-wrap:wrap}
.member-card{width:90px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.1);border-radius:12px;overflow:hidden;backdrop-filter:blur(10px);pointer-events:none}
.member-card img{width:90px;height:90px;object-fit:cover;display:block}
.member-card .info{padding:6px;text-align:center}
.member-card .info .name{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.member-card .info .age-city{font-size:9px;color:rgba(255,255,255,.5)}
.member-card .online-dot{display:inline-block;width:6px;height:6px;background:#6f6;border-radius:50%;margin-right:3px}

/* RIGHT - FORM */
.form-wrapper{width:420px;flex-shrink:0;background:#fff;border-radius:16px;padding:28px 24px;box-shadow:0 20px 60px rgba(0,0,0,.5);min-height:380px}
.opforpro-embed,.opforpro-embed *{color:#1a1a2e !important}
.opforpro-embed input[type="submit"],.opforpro-embed button[type="submit"],.opforpro-embed button:not([type]),.opforpro-embed [class*="btn"],.opforpro-embed [class*="submit"]{color:#fff !important}
.form-wrapper .card-title{font-size:20px;font-weight:700;color:#1a1a2e;margin-bottom:2px;text-align:center}
.form-wrapper .card-sub{font-size:13px;color:#6b6b80;margin-bottom:16px;text-align:center}
.form-wrapper .opforpro-embed{width:100%;min-height:300px}

/* BOTTOM BAR */
.members-bar{position:relative;z-index:1;background:rgba(0,0,0,.8);backdrop-filter:blur(10px);padding:20px 40px;border-top:1px solid rgba(255,255,255,.06)}
.members-bar-inner{max-width:1140px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.members-bar h3{font-size:14px;font-weight:600;color:rgba(255,255,255,.7)}
.members-scroll{display:flex;gap:10px;overflow:hidden}
.mini-avatar{width:44px;height:44px;border-radius:50%;object-fit:cover;border:2px solid #e63946;pointer-events:none}

.stats-bar{display:flex;gap:40px;align-items:center}
.stat-item{text-align:center}
.stat-item strong{display:block;font-size:20px;font-weight:700;color:#e63946}
.stat-item span{font-size:11px;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.5px}

/* FOOTER */
footer{text-align:center;padding:16px;font-size:11px;color:#404058;background:#06060a}
footer a{color:#606078}

/* RESPONSIVE */
@media(max-width:1000px){
.hero-inner{flex-direction:column;gap:40px;align-items:center;text-align:center}
.hero-text{max-width:100%}
.features{align-items:center}
.members-preview{justify-content:center}
.form-wrapper{width:100%;max-width:420px}
.top-bar{padding:12px 20px}
.members-bar-inner{flex-direction:column;gap:16px;text-align:center}
.stats-bar{gap:24px}
}
@media(max-width:500px){
.hero{padding:80px 16px 30px}
.hero-text h1{font-size:30px}
.form-wrapper{padding:22px 18px}
.members-preview{gap:8px}
.member-card{width:75px}
.member-card img{width:75px;height:75px}
.stats-bar{flex-wrap:wrap;justify-content:center}
}