/* ========== VARIABLES & RESET ========== */
:root {
    --bg: #0a0610;
    --bg-card: rgba(255,255,255,0.03);
    --bg-card-hover: rgba(255,255,255,0.06);
    --text: #f0e8f8;
    --text-dim: #9080a8;
    --accent: #a855f7;
    --accent2: #e879a8;
    --gradient: linear-gradient(135deg, #9333ea, #e879a8);
    --glass: rgba(255,255,255,0.05);
    --glass-border: rgba(255,255,255,0.08);
    --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:url('assets/images/site-bg.png') center/cover no-repeat;opacity:0.25;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 ========== */
.cursor-glow { position:fixed; width:400px; height:400px; border-radius:50%; background:radial-gradient(circle,rgba(168,85,247,0.08),transparent 70%); pointer-events:none; z-index:9999; transform:translate(-50%,-50%); transition:opacity 0.3s; }

/* ========== PARTICLES ========== */
.particles { position:fixed; inset:0; pointer-events:none; z-index:0; }
.particle { position:absolute; width:2px; height:2px; background:rgba(168,85,247,0.4); border-radius:50%; animation:float linear infinite; }
@keyframes float { 0%{transform:translateY(100vh) scale(0); opacity:0;} 10%{opacity:1;} 90%{opacity:1;} 100%{transform:translateY(-10vh) scale(1); opacity:0;} }

/* ========== NAVBAR ========== */
.navbar { position:fixed; top:0; left:0; right:0; z-index:1000; padding:16px 0; transition:var(--transition); }
.navbar.scrolled { background:rgba(10,10,15,0.9); backdrop-filter:blur(20px); border-bottom:1px solid var(--glass-border); padding:10px 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:drop-shadow(0 0 8px rgba(168,85,247,0.5)); }
.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 16px; border-radius:8px; font-size:0.9rem; font-weight:500; color:var(--text-dim); transition:var(--transition); }
.nav-link:hover, .nav-link.active { color:var(--text); background:var(--glass); }
.cta-link { background:var(--gradient) !important; color:#fff !important; font-weight:600; }
.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; }
.hero-bg { position:absolute; inset:0; }
.hero-bg-img { width:100%; height:100%; object-fit:cover; filter:brightness(0.3) saturate(1.2); }
.hero-overlay { position:absolute; inset:0; background:rgba(10,10,15,0.45); }
.hero-content { position:relative; z-index:2; text-align:center; padding:120px 24px 80px; }
.hero-badge { display:inline-flex; align-items:center; gap:8px; padding:8px 20px; border-radius:50px; background:var(--glass); border:1px solid rgba(168,85,247,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 8px rgba(168,85,247,0.6); }
@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(147,51,234,0.3); }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 8px 32px rgba(147,51,234,0.5); }
.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(147,51,234,0.1); border:1px solid rgba(147,51,234,0.2); }
.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(147,51,234,0.3); }
.card-icon { width:56px; height:56px; border-radius:14px; background:rgba(147,51,234,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(147,51,234,0.2), 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(147,51,234,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(147,51,234,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(147,51,234,0.15); color:var(--accent); }
.role-admin { background:rgba(232,121,168,0.15); color:var(--accent2); }
.role-dev { background:rgba(56,189,248,0.15); color:#38bdf8; }
.role-mod { background:rgba(34,197,94,0.15); color:#22c55e; }
.staff-card h3 { font-size:1.1rem; margin-bottom:4px; }
.staff-card p { color:var(--text-dim); font-size:0.85rem; }

/* ========== WHITELIST SECTION ========== */
.wl-section { position:relative; overflow:hidden; padding:120px 0; }
.wl-bg-effects { position:absolute; inset:0; pointer-events:none; }
.wl-orb { position:absolute; border-radius:50%; filter:blur(80px); opacity:0.15; }
.orb-1 { width:400px; height:400px; background:var(--accent); top:-100px; left:-100px; animation:orbFloat 8s ease-in-out infinite; }
.orb-2 { width:300px; height:300px; background:var(--accent2); bottom:-50px; right:-50px; animation:orbFloat 6s ease-in-out infinite reverse; }
.orb-3 { width:200px; height:200px; background:#9333ea; top:50%; left:50%; transform:translate(-50%,-50%); animation:orbFloat 10s ease-in-out infinite; }
@keyframes orbFloat { 0%,100%{transform:translate(0,0);} 50%{transform:translate(30px,-30px);} }
.wl-content { position:relative; z-index:2; text-align:center; }
.wl-steps { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px; margin:48px 0; max-width:960px; margin-left:auto; margin-right:auto; }
.wl-step { display:flex; align-items:flex-start; gap:16px; padding:20px; border-radius:var(--radius-sm); background:var(--glass); border:1px solid var(--glass-border); backdrop-filter:blur(10px); text-align:left; transition:var(--transition); }
.wl-step:hover { background:var(--bg-card-hover); transform:translateY(-2px); }
.step-number { width:36px; height:36px; border-radius:10px; background:var(--gradient); display:flex; align-items:center; justify-content:center; font-family:'Outfit',sans-serif; font-weight:700; font-size:0.9rem; color:#fff; flex-shrink:0; }
.step-content h4 { font-size:0.95rem; margin-bottom:4px; }
.step-content p { color:var(--text-dim); font-size:0.8rem; }

/* ========== FOOTER ========== */
.footer { border-top:1px solid var(--glass-border); padding:64px 0 32px; position:relative; z-index:1; }
.footer-content { display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; margin-bottom:48px; }
.footer-logo { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
.footer-brand p { color:var(--text-dim); font-size:0.9rem; max-width:300px; }
.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-dim); font-size:0.9rem; transition:var(--transition); }
.footer-links a:hover { color:var(--text); }
.footer-bottom { border-top:1px solid var(--glass-border); padding-top:24px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.footer-bottom p { color:var(--text-dim); font-size:0.8rem; }
.footer-disclaimer { opacity:0.5; }

/* ========== 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(10,10,15,0.98); backdrop-filter:blur(20px); flex-direction:column; padding:80px 32px 32px; gap:4px; transition:right 0.4s ease; border-left:1px solid var(--glass-border); }
    .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;}}