/* ========== VARIABLES & RESET ========== */
:root {
    --bg: #040305;
    --bg-card: rgba(255,255,255,0.06);
    --bg-card-hover: rgba(255,255,255,0.12);
    --text: #f9f7fb;
    --text-dim: rgba(255,255,255,0.72);
    --accent: #ff4d9f;
    --accent2: #ff93c2;
    --gradient: linear-gradient(135deg, #ff2a7a, #ff7cc7);
    --glass: rgba(255,255,255,0.08);
    --glass-border: rgba(255,255,255,0.14);
    --radius: 16px;
    --radius-sm: 10px;
    --transition: 0.3s cubic-bezier(0.4,0,0.2,1);
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--text); line-height:1.6; overflow-x:hidden; }
body::before{content:'';position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at top left, rgba(255,77,159,0.14), transparent 30%), linear-gradient(180deg, rgba(0,0,0,0.9), rgba(0,0,0,0.98));opacity:1;pointer-events:none;}
h1,h2,h3,h4 { font-family:'Outfit',sans-serif; font-weight:700; line-height:1.2; }
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { max-width:100%; display:block; }
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.accent { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }

/* ========== CURSOR GLOW & PARTICLES DISABLED ========== */
.cursor-glow, .particles, .particle { display:none !important; }

/* ========== NAVBAR ========== */
.navbar { position:relative; z-index:1000; padding:20px 0; background:transparent; }
.navbar.scrolled { background:transparent; border:none; padding:20px 0; }
.nav-container { max-width:1200px; margin:0 auto; padding:0 24px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { display:flex; align-items:center; gap:10px; }
.logo-img { width:44px; height:44px; border-radius:12px; object-fit:cover; filter:none; }
.logo-text { font-family:'Outfit',sans-serif; font-size:1.3rem; font-weight:800; letter-spacing:2px; }
.logo-accent { background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.nav-links { display:flex; align-items:center; gap:8px; }
.nav-link { padding:8px 14px; border-radius:8px; font-size:0.9rem; font-weight:500; color:var(--text); transition:var(--transition); }
.nav-link:hover, .nav-link.active { color:#fff; background:rgba(255,255,255,0.12); }
.nav-discord { display:inline-flex; }
.nav-toggle { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-toggle span { width:24px; height:2px; background:var(--text); border-radius:2px; transition:var(--transition); }

/* ========== HERO ========== */
.hero { position:relative; min-height:100vh; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0 24px; }
.hero-content { position:relative; z-index:2; text-align:center; padding:0; max-width:720px; }
.hero-simple .hero-badge { display:none; }
.hero-title { margin-bottom:20px; }
.hero-subtitle { max-width:650px; margin:0 auto 32px; font-size:1.05rem; color:var(--text-dim); line-height:1.7; }
.hero-actions { justify-content:center; }
.hero-stats { display:none; }
.scroll-indicator { display:none; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 20px; border-radius:50px; background:var(--glass); border:1px solid rgba(255,77,159,0.2); backdrop-filter:blur(10px); font-size:0.8rem; font-weight:600; letter-spacing:2px; text-transform:uppercase; color:var(--accent); margin-bottom:24px; animation:fadeInDown 0.8s ease; }
.badge-dot { width:8px; height:8px; border-radius:50%; background:var(--accent); animation:pulse 2s infinite; box-shadow:0 0 10px rgba(255,77,159,0.45); }
@keyframes pulse { 0%,100%{opacity:1; transform:scale(1);} 50%{opacity:0.5; transform:scale(0.8);} }
.hero-title { margin-bottom:20px; animation:fadeInUp 0.8s ease; }
.title-line { display:block; font-size:clamp(0.9rem,2vw,1.2rem); letter-spacing:6px; color:var(--text-dim); font-weight:400; margin-bottom:8px; }
.title-main { display:block; font-size:clamp(3rem,8vw,6rem); font-weight:900; letter-spacing:4px; }
.hero-subtitle { max-width:600px; margin:0 auto 32px; font-size:1.05rem; color:var(--text-dim); line-height:1.7; animation:fadeInUp 0.8s ease 0.2s both; }
.hero-actions { display:flex; gap:16px; justify-content:center; flex-wrap:wrap; animation:fadeInUp 0.8s ease 0.4s both; }
.hero-stats { display:flex; align-items:center; gap:32px; justify-content:center; margin-top:48px; animation:fadeInUp 0.8s ease 0.6s both; }
.stat { text-align:center; }
.stat-number { display:block; font-family:'Outfit',sans-serif; font-size:2rem; font-weight:800; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.stat-label { font-size:0.8rem; color:var(--text-dim); text-transform:uppercase; letter-spacing:2px; }
.stat-divider { width:1px; height:40px; background:var(--glass-border); }

@keyframes fadeInUp { from{opacity:0; transform:translateY(30px);} to{opacity:1; transform:translateY(0);} }
@keyframes fadeInDown { from{opacity:0; transform:translateY(-20px);} to{opacity:1; transform:translateY(0);} }

/* Scroll indicator */
.scroll-indicator { position:absolute; bottom:32px; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:8px; color:var(--text-dim); font-size:0.7rem; letter-spacing:3px; text-transform:uppercase; animation:fadeInUp 1s ease 1s both; }
.scroll-line { width:1px; height:40px; background:linear-gradient(to bottom, var(--accent), transparent); animation:scrollPulse 2s ease infinite; }
@keyframes scrollPulse { 0%,100%{opacity:0.3; height:40px;} 50%{opacity:1; height:60px;} }

/* ========== BUTTONS ========== */
.btn { display:inline-flex; align-items:center; gap:8px; padding:14px 28px; border-radius:12px; font-family:'Outfit',sans-serif; font-size:0.95rem; font-weight:600; transition:var(--transition); cursor:pointer; border:none; }
.btn-primary { background:var(--gradient); color:#fff; box-shadow:0 4px 24px rgba(255,77,159,0.3); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(255,77,159,0.45); }
.btn-secondary { background:var(--glass); color:var(--text); border:1px solid var(--glass-border); backdrop-filter:blur(10px); }
.btn-secondary:hover { background:var(--bg-card-hover); transform:translateY(-2px); }
.btn-lg { padding:18px 36px; font-size:1.05rem; border-radius:14px; }

/* ========== SECTIONS ========== */
.section { padding:100px 0; position:relative; z-index:1; }
.section-dark { background:rgba(255,255,255,0.01); }
.section-header { text-align:center; margin-bottom:64px; }
.section-tag { display:inline-block; font-size:0.75rem; font-weight:700; letter-spacing:4px; text-transform:uppercase; color:var(--accent); margin-bottom:16px; padding:6px 16px; border-radius:50px; background:rgba(255,77,159,0.12); border:1px solid rgba(255,77,159,0.18); }
.section-title { font-size:clamp(2rem,4vw,3rem); margin-bottom:16px; }
.section-desc { max-width:600px; margin:0 auto; color:var(--text-dim); font-size:1rem; }

/* ========== ABOUT GRID ========== */
.about-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:24px; }
.about-card { padding:32px; border-radius:var(--radius); background:var(--bg-card); border:1px solid var(--glass-border); transition:var(--transition); }
.about-card:hover { background:var(--bg-card-hover); transform:translateY(-4px); border-color:rgba(255,77,159,0.3); }
.card-icon { width:56px; height:56px; border-radius:14px; background:rgba(255,77,159,0.1); display:flex; align-items:center; justify-content:center; margin-bottom:20px; color:var(--accent); }
.about-card h3 { font-size:1.15rem; margin-bottom:8px; }
.about-card p { color:var(--text-dim); font-size:0.9rem; }

/* ========== FEATURES ========== */
.feature-item { display:grid; grid-template-columns:1fr 1fr; gap:48px; align-items:center; margin-bottom:80px; }
.feature-item:last-child { margin-bottom:0; }
.feature-item.reverse { direction:rtl; }
.feature-item.reverse > * { direction:ltr; }
.feature-image { position:relative; border-radius:var(--radius); overflow:hidden; aspect-ratio:16/10; }
.feature-image img { width:100%; height:100%; object-fit:cover; transition:transform 0.5s ease; }
.feature-image:hover img { transform:scale(1.05); }
.feature-image-overlay { position:absolute; inset:0; background:linear-gradient(135deg, rgba(255,77,159,0.18), transparent); }
.feature-tag { display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:3px; color:var(--accent2); margin-bottom:12px; }
.feature-content h3 { font-size:1.8rem; margin-bottom:12px; }
.feature-content p { color:var(--text-dim); margin-bottom:20px; font-size:0.95rem; }
.feature-list { display:flex; flex-direction:column; gap:10px; }
.feature-list li { display:flex; align-items:center; gap:10px; color:var(--text-dim); font-size:0.9rem; }
.feature-list li::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--gradient); flex-shrink:0; }

/* ========== RULES ========== */
.rules-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:20px; }
.rule-card { padding:28px; border-radius:var(--radius); background:var(--bg-card); border:1px solid var(--glass-border); transition:var(--transition); position:relative; overflow:hidden; }
.rule-card:hover { background:var(--bg-card-hover); transform:translateY(-2px); border-color:rgba(255,77,159,0.3); }
.rule-number { font-family:'Outfit',sans-serif; font-size:3rem; font-weight:900; background:var(--gradient); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; opacity:0.15; position:absolute; top:12px; right:20px; }
.rule-card h3 { font-size:1.05rem; margin-bottom:8px; }
.rule-card p { color:var(--text-dim); font-size:0.88rem; }

/* ========== STAFF ========== */
.staff-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:24px; }
.staff-card { text-align:center; padding:36px 24px; border-radius:var(--radius); background:var(--bg-card); border:1px solid var(--glass-border); transition:var(--transition); }
.staff-card:hover { background:var(--bg-card-hover); transform:translateY(-4px); border-color:rgba(255,77,159,0.3); }
.staff-avatar { position:relative; width:80px; height:80px; margin:0 auto 16px; }
.avatar-placeholder { width:80px; height:80px; border-radius:50%; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-family:'Outfit',sans-serif; font-size:1.5rem; font-weight:700; color:#fff; }
.staff-status { position:absolute; bottom:2px; right:2px; width:16px; height:16px; border-radius:50%; border:3px solid var(--bg); }
.staff-status.online { background:#22c55e; }
.staff-role { display:inline-block; padding:4px 14px; border-radius:50px; font-size:0.75rem; font-weight:600; margin:8px 0 12px; }
.role-founder { background:rgba(255,77,159,0.15); color:var(--accent); }
.role-admin { background:rgba(255,77,159,0.12); color:#ff9bc1; }
.role-dev { background:rgba(255,77,159,0.15); color:#ff9bc1; }
.role-mod { background:rgba(255,77,159,0.12); color:#ff9bc1; }
.staff-card h3 { font-size:1.1rem; margin-bottom:4px; }
.staff-card p { color:var(--text-dim); font-size:0.85rem; }

/* ========== WHITELIST SECTION ========== */
/* Whitelist visuals removed */
.wl-section, .wl-bg-effects, .wl-orb, .wl-content, .wl-steps, .wl-step, .step-number, .step-content { display:none !important; }

/* ========== FOOTER ========== */
.footer { border-top:1px solid rgba(255,255,255,0.08); padding:48px 0 24px; position:relative; z-index:1; }
.footer-content { display:grid; grid-template-columns:1.5fr 1fr; gap:32px; margin-bottom:24px; }
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.footer-brand p { color:var(--text-dim); font-size:0.95rem; max-width:320px; }
.footer-links h4 { font-size:0.85rem; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--text-dim); margin-bottom:16px; }
.footer-links li { margin-bottom:10px; }
.footer-links a { color:var(--text); font-size:0.95rem; transition:var(--transition); }
.footer-links a:hover { color:#fff; }
.footer-bottom { padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.footer-bottom p { color:var(--text-dim); font-size:0.82rem; }

/* ========== ANIMATIONS ========== */
[data-aos] { opacity:0; transform:translateY(30px); transition:opacity 0.6s ease, transform 0.6s ease; }
[data-aos="fade-right"] { transform:translateX(-30px); }
[data-aos="fade-left"] { transform:translateX(30px); }
[data-aos].visible { opacity:1; transform:translate(0,0); }

/* ========== RESPONSIVE ========== */
@media(max-width:768px) {
    .nav-links { position:fixed; top:0; right:-100%; width:280px; height:100vh; background:rgba(255,255,255,0.08); backdrop-filter:blur(20px); flex-direction:column; padding:80px 32px 32px; gap:12px; transition:right 0.4s ease; border-left:none; }
    .nav-links.open { right:0; }
    .nav-toggle { display:flex; z-index:1001; }
    .feature-item, .feature-item.reverse { grid-template-columns:1fr; direction:ltr; }
    .feature-item.reverse > * { direction:ltr; }
    .hero-stats { gap:20px; }
    .footer-content { grid-template-columns:1fr; gap:32px; }
    .footer-bottom { flex-direction:column; text-align:center; }
    .rules-grid { grid-template-columns:1fr; }
    .wl-steps { grid-template-columns:1fr; }
}

/* ========== DEV CREDIT ========== */
.dev-credit{text-align:center;margin-top:12px;font-size:0.75rem;color:var(--text-dim);opacity:0.6;letter-spacing:0.5px;}
.dev-credit span{background:var(--gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-weight:600;}

/* ========== GTA CHARACTER BACKGROUND ========== */
.char-bg-layer{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.char-bg-img{position:absolute;max-height:85vh;max-width:55vw;object-fit:contain;opacity:0;transform:scale(0.7);transition:none;filter:brightness(.5) saturate(.6);will-change:transform,opacity;mix-blend-mode:lighten;bottom:0;}
.char-bg-img.zoom-in{animation:charZoomIn 3s ease-out forwards;}
.char-bg-img.zoom-out{animation:charZoomOut 2s ease-in forwards;}
@keyframes charZoomIn{
    0%{opacity:0;transform:scale(0.5);}
    50%{opacity:0.18;}
    100%{opacity:0.15;transform:scale(1);}
}
@keyframes charZoomOut{
    0%{opacity:0.15;transform:scale(1);}
    50%{opacity:0.08;}
    100%{opacity:0;transform:scale(1.3);}
}
@media(max-width:768px){.char-bg-layer{display:none;}}

/* Dev credit dynamic */
.dev-credit:empty { display:none; }