@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700;900&display=swap');
:root{--primary:#6d28d9;--primary-2:#a855f7;--primary-3:#2b02e0;--primary-dim:rgba(109,40,217,0.2);--bg:#050308;--bg-card:rgba(12,8,20,.9);--bg-card2:#120b1f;--border:rgba(168,85,247,0.28);--text:#fff;--muted:#b9abc9;--success:#22c55e;--warning:#f59e0b;--info:#8b5cf6;--shadow:0 0 28px rgba(168,85,247,0.26);}
*{margin:0;padding:0;box-sizing:border-box;font-family:'Cairo',sans-serif;}
html{scroll-behavior:smooth;}
body{background:linear-gradient(180deg,rgba(5,3,8,.86),rgba(5,3,8,.97)),url('/assets/banner.gif') center top/cover fixed no-repeat;color:var(--text);line-height:1.7;overflow-x:hidden;}
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--primary);border-radius:10px}
a{text-decoration:none;color:inherit;}
img{max-width:100%;}
/* ===NAVBAR=== */
.navbar{position:fixed;top:0;width:100%;z-index:9999;background:rgba(5,3,8,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--border);padding:.9rem 0;transition:.3s;}
.nav-container{max-width:1280px;margin:0 auto;padding:0 24px;display:flex;align-items:center;gap:2rem;}
.logo{font-size:1.35rem;font-weight:900;color:var(--text);display:flex;align-items:center;gap:10px;}
.logo img{width:42px;height:42px;border-radius:8px;object-fit:cover;border:1px solid var(--border);box-shadow:var(--shadow);}
.logo i{color:var(--primary);}
.nav-links{display:flex;list-style:none;gap:.2rem;margin:0;padding:0;margin-right:auto;}
.nav-links a{color:var(--muted);padding:8px 14px;border-radius:8px;font-weight:600;font-size:.9rem;transition:.25s;display:flex;align-items:center;gap:6px;}
.nav-links a:hover,.nav-links a.active{color:#fff;background:var(--primary-dim);}
.nav-links a.nav-admin{color:var(--warning);}
.nav-auth{flex-shrink:0;}
/* User Dropdown */
.nav-user{position:relative;cursor:pointer;}
.nav-avatar{width:38px;height:38px;border-radius:50%;border:2px solid var(--primary);transition:.3s;display:block;}
.nav-avatar:hover{box-shadow:var(--shadow);}
.nav-dropdown{position:relative;}
.nav-username{display:none;}
.nav-menu{position:absolute;top:calc(100% + 12px);left:0;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:8px;min-width:190px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:.25s;z-index:100;}
.nav-user:hover .nav-menu{opacity:1;visibility:visible;transform:translateY(0);}
.nav-menu a{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:8px;color:var(--muted);font-size:.9rem;transition:.2s;}
.nav-menu a:hover{color:#fff;background:var(--primary-dim);}
.nav-menu .logout-link:hover{color:#f87171;background:rgba(248,113,113,.1);}
/* Mobile Toggle */
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span{width:24px;height:2px;background:var(--text);border-radius:2px;transition:.3s;display:block;}
/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 26px;border-radius:8px;font-weight:700;font-size:.9rem;cursor:pointer;border:none;transition:.3s;text-decoration:none;}
.btn-primary{background:linear-gradient(135deg,var(--primary-3),var(--primary),var(--primary-2));color:#fff;box-shadow:0 4px 18px rgba(168,85,247,.24);}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(168,85,247,.38);}
.btn-outline{background:transparent;border:2px solid var(--primary);color:#fff;}
.btn-outline:hover{background:linear-gradient(135deg,var(--primary-3),var(--primary));box-shadow:var(--shadow);}
.btn-discord{background:#5865F2;color:#fff;box-shadow:0 4px 15px rgba(88,101,242,.3);}
.btn-discord:hover{transform:translateY(-2px);box-shadow:0 8px 25px rgba(88,101,242,.5);}
.btn-success{background:#16a34a;color:#fff;}
.btn-success:hover{background:#15803d;}
.btn-danger{background:#dc2626;color:#fff;}
.btn-sm{padding:7px 16px;font-size:.82rem;}
.btn-lg{padding:14px 36px;font-size:1.05rem;}
.btn-block{width:100%;justify-content:center;}
/* Cards */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:8px;padding:1.8rem;position:relative;overflow:hidden;transition:.35s;backdrop-filter:blur(10px);}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary-2),var(--primary-3),transparent);opacity:.75;}
.card:hover{border-color:rgba(168,85,247,.55);transform:translateY(-4px);box-shadow:0 12px 42px rgba(109,40,217,.18);}
.card-flat{transform:none!important;}
/* Badges */
.badge{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:20px;font-size:.75rem;font-weight:700;}
.badge-primary{background:var(--primary-dim);color:var(--primary);border:1px solid var(--border);}
.badge-success{background:rgba(34,197,94,.15);color:#22c55e;border:1px solid rgba(34,197,94,.25);}
.badge-warning{background:rgba(245,158,11,.15);color:#f59e0b;border:1px solid rgba(245,158,11,.25);}
.badge-danger{background:rgba(239,68,68,.15);color:#ef4444;border:1px solid rgba(239,68,68,.25);}
.badge-info{background:rgba(59,130,246,.15);color:#3b82f6;border:1px solid rgba(59,130,246,.25);}
/* Forms */
.form-group{margin-bottom:1.3rem;}
.form-group label{display:block;margin-bottom:7px;font-weight:700;font-size:.9rem;color:var(--muted);}
.form-control{width:100%;padding:11px 14px;background:#111;border:1px solid #2a2a2a;color:#fff;border-radius:10px;font-family:'Cairo',sans-serif;font-size:.95rem;outline:none;transition:.3s;}
.form-control:focus{border-color:var(--primary-2);box-shadow:0 0 0 3px rgba(168,85,247,.18);}
textarea.form-control{resize:vertical;min-height:100px;}
select.form-control option{background:#111;}
/* Alerts */
.alert{padding:14px 18px;border-radius:10px;margin-bottom:1.2rem;display:flex;align-items:flex-start;gap:10px;font-weight:600;}
.alert-success{background:rgba(34,197,94,.1);border:1px solid rgba(34,197,94,.25);color:#22c55e;}
.alert-danger{background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.25);color:#ef4444;}
.alert-warning{background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);color:#f59e0b;}
.alert-info{background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.25);color:#60a5fa;}
/* Tables */
.table-wrap{overflow-x:auto;border-radius:8px;border:1px solid var(--border);}
table.tbl{width:100%;border-collapse:collapse;}
table.tbl th{background:#111;padding:13px 16px;text-align:right;font-weight:700;font-size:.85rem;color:var(--muted);border-bottom:1px solid var(--border);}
table.tbl td{padding:12px 16px;border-bottom:1px solid #151515;font-size:.9rem;}
table.tbl tr:hover td{background:rgba(255,255,255,.02);}
/* Layout */
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
.main-wrapper{padding-top:80px;}
/* Hero */
.hero{min-height:92vh;display:flex;align-items:center;justify-content:center;text-align:center;position:relative;overflow:hidden;}
.hero-bg{position:absolute;inset:0;background:url('/assets/banner.gif') center/cover no-repeat;filter:brightness(.48) saturate(1.12);}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,3,8,.18) 0,rgba(5,3,8,.98) 100%);}
.hero-content{position:relative;z-index:2;padding:0 20px;max-width:900px;margin:0 auto;}
.hero-eyebrow{display:inline-flex;align-items:center;gap:8px;background:var(--primary-dim);border:1px solid var(--border);color:var(--primary);padding:6px 16px;border-radius:30px;font-size:.85rem;font-weight:700;margin-bottom:1.5rem;}
.hero h1{font-size:clamp(2.2rem,5vw,4.5rem);font-weight:900;line-height:1.1;margin-bottom:1.4rem;letter-spacing:-1px;}
.hero h1 span{color:var(--primary-2);text-shadow:0 0 30px rgba(168,85,247,.62);}
.hero p{font-size:1.15rem;color:var(--muted);max-width:650px;margin:0 auto 2.5rem;}
.hero-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;}
/* Stats bar */
.stats-bar{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:8px;overflow:hidden;margin-top:-1px;}
.stat-item{background:var(--bg-card);padding:24px;text-align:center;}
.stat-item .num{font-size:2rem;font-weight:900;color:var(--primary);}
.stat-item .lbl{font-size:.82rem;color:var(--muted);margin-top:4px;}
/* Section headings */
.section-head{text-align:center;margin-bottom:3.5rem;}
.section-head h2{font-size:clamp(1.8rem,3.5vw,2.8rem);font-weight:900;margin-bottom:.8rem;}
.section-head h2 span{color:var(--primary);}
.section-head p{color:var(--muted);max-width:540px;margin:0 auto;}
/* Glow text */
.glow{text-shadow:0 0 20px rgba(168,85,247,.5),0 0 42px rgba(43,2,224,.38);}
/* Progress */
.progress{background:#1a1a1a;border-radius:10px;height:8px;overflow:hidden;}
.progress-bar{height:100%;background:linear-gradient(90deg,var(--primary-3),var(--primary-2));border-radius:8px;transition:.5s;box-shadow:0 0 8px var(--primary-2);}
/* Products grid */
.products-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px;}
.product-card{position:relative;overflow:hidden;}
.product-img-wrap{height:180px;overflow:hidden;border-radius:10px;margin-bottom:1rem;background:#0d0d0d;}
.product-img-wrap img{width:100%;height:100%;object-fit:cover;transition:.4s;}
.product-card:hover .product-img-wrap img{transform:scale(1.05);}
.product-badge{position:absolute;top:14px;right:14px;}
.product-price{font-size:1.35rem;font-weight:900;color:var(--primary);}
/* Payment Methods */
.pay-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px;}
.pay-card{background:#0d0d0d;border:2px solid #1f1f1f;border-radius:8px;padding:18px;text-align:center;cursor:pointer;transition:.3s;}
.pay-card:hover{border-color:var(--primary);}
.pay-card.selected{border-color:var(--primary);background:var(--primary-dim);box-shadow:var(--shadow);}
.pay-card i{font-size:1.8rem;color:var(--muted);margin-bottom:8px;display:block;}
.pay-card.selected i{color:var(--primary);}
.pay-card span{font-size:.82rem;font-weight:700;}
/* Exam */
.exam-wrap{max-width:800px;margin:0 auto;}
.question-card{animation:fadeInUp .3s ease;}
.option-label{display:flex;align-items:center;gap:12px;padding:14px 18px;border:2px solid #1f1f1f;border-radius:10px;cursor:pointer;transition:.25s;margin-bottom:10px;}
.option-label:hover{border-color:rgba(168,85,247,.5);background:var(--primary-dim);}
.option-label input[type=radio]{accent-color:var(--primary);width:18px;height:18px;flex-shrink:0;}
.option-label input:checked ~ span{color:#fff;}
.option-label:has(input:checked){border-color:var(--primary);background:var(--primary-dim);}
/* Admin */
.admin-layout{display:flex;min-height:100vh;}
.sidebar{width:260px;flex-shrink:0;background:var(--bg-card);border-left:1px solid var(--border);display:flex;flex-direction:column;padding:24px 16px;position:fixed;top:0;right:0;height:100vh;overflow-y:auto;z-index:100;}
.sidebar-brand{font-size:1.2rem;font-weight:900;padding:8px 12px;margin-bottom:24px;color:var(--primary);}
.sidebar-brand i{margin-left:8px;}
.side-link{display:flex;align-items:center;gap:10px;padding:11px 14px;border-radius:9px;color:var(--muted);font-weight:600;font-size:.88rem;transition:.25s;margin-bottom:3px;}
.side-link:hover,.side-link.active{background:var(--primary-dim);color:#fff;}
.side-link.active{border-right:3px solid var(--primary);}
.side-link i{width:18px;text-align:center;}
.admin-content{flex:1;margin-right:260px;padding:32px;min-height:100vh;}
.admin-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:32px;}
.admin-topbar h1{font-size:1.6rem;font-weight:900;}
.stat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px;margin-bottom:32px;}
.stat-card{display:flex;align-items:center;gap:16px;padding:20px;}
.stat-card .ico{width:50px;height:50px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
.stat-card .val{font-size:1.8rem;font-weight:900;line-height:1;}
.stat-card .lbl{font-size:.8rem;color:var(--muted);margin-top:3px;}
/* Footer */
.footer{background:#030303;border-top:1px solid var(--border);padding:60px 0 0;}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 24px;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;}
.footer-brand p{color:var(--muted);margin:.8rem 0 1.2rem;font-size:.9rem;line-height:1.7;}
.footer-social{display:flex;gap:12px;}
.footer-social a{width:38px;height:38px;border-radius:50%;background:#111;border:1px solid #2a2a2a;display:flex;align-items:center;justify-content:center;color:var(--muted);transition:.3s;}
.footer-social a:hover{border-color:var(--primary);color:var(--primary);}
.footer-links h4{font-size:.95rem;font-weight:800;margin-bottom:1rem;color:#fff;}
.footer-links ul{list-style:none;}
.footer-links ul li{margin-bottom:8px;}
.footer-links ul a{color:var(--muted);font-size:.88rem;display:flex;align-items:center;gap:7px;transition:.25s;}
.footer-links ul a:hover{color:var(--primary);}
.footer-join{display:flex;flex-direction:column;}
.footer-join h4{font-size:.95rem;font-weight:800;margin-bottom:1rem;}
.footer-bottom{border-top:1px solid #111;padding:20px 0;text-align:center;color:var(--muted);font-size:.83rem;}
/* Ticket */
.ticket-card{border-right:4px solid var(--info);}
.ticket-card.open{border-right-color:var(--info);}
.ticket-card.closed{border-right-color:var(--muted);}
.ticket-card.urgent{border-right-color:var(--primary);}
/* Animations */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes glow-pulse{0%,100%{box-shadow:0 0 5px rgba(168,85,247,.42)}50%{box-shadow:0 0 25px rgba(109,40,217,.78)}}
.fade-in{animation:fadeInUp .5s ease forwards;}
.pulse{animation:pulse 2s infinite;}
/* Utilities */
.text-primary{color:var(--primary)!important;}
.text-muted{color:var(--muted)!important;}
.text-success{color:var(--success)!important;}
.text-danger{color:#ef4444!important;}
.text-warning{color:var(--warning)!important;}
.text-center{text-align:center;}
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}.mt-4{margin-top:2rem}.mt-5{margin-top:3rem}
.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}.mb-3{margin-bottom:1.5rem}.mb-4{margin-bottom:2rem}.mb-5{margin-bottom:3rem}
.p-0{padding:0!important}.d-flex{display:flex}.align-center{align-items:center}.justify-between{justify-content:space-between}.gap-2{gap:1rem}
.w-100{width:100%}.rounded{border-radius:10px}.hidden{display:none!important}
/* Fullscreen blocker */
#fullscreen-blocker{min-height:80vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;}
/* Responsive */
@media(max-width:1024px){.footer-grid{grid-template-columns:1fr 1fr;}.admin-content{margin-right:0;padding:20px;}.sidebar{display:none;}}
@media(max-width:768px){.nav-links{display:none;flex-direction:column;position:fixed;top:70px;right:0;left:0;background:rgba(5,5,5,.97);padding:20px;border-bottom:1px solid var(--border);}.nav-links.open{display:flex;}.nav-toggle{display:flex;}.hero h1{font-size:2rem;}.footer-grid{grid-template-columns:1fr;gap:24px;}.hero-btns{flex-direction:column;align-items:center;}.products-grid{grid-template-columns:1fr;}.stat-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.container{padding:0 14px;}.btn-lg{padding:12px 24px;font-size:.95rem;}.stat-grid{grid-template-columns:1fr;}}

/* Premium dark refresh */
:root{
  --primary:#7c3aed;
  --primary-2:#c084fc;
  --primary-3:#3b0764;
  --primary-dim:rgba(124,58,237,.16);
  --bg:#030207;
  --bg-card:rgba(11,9,17,.86);
  --bg-card2:#100b19;
  --border:rgba(192,132,252,.22);
  --muted:#b7adc7;
  --shadow:0 18px 55px rgba(0,0,0,.38),0 0 34px rgba(124,58,237,.18);
}
body{
  background:
    linear-gradient(180deg,rgba(3,2,7,.58),rgba(3,2,7,.96) 44%,#030207 100%),
    url('/assets/banner.gif') center top/cover no-repeat fixed;
}
.navbar{
  background:rgba(3,2,7,.76);
  box-shadow:0 12px 36px rgba(0,0,0,.26);
}
.logo-text{
  font-size:1.1rem;
  letter-spacing:0;
  padding:8px 0;
}
.nav-links a{
  border:1px solid transparent;
}
.nav-links a:hover,.nav-links a.active{
  border-color:var(--border);
  background:rgba(255,255,255,.045);
}
.btn{
  border-radius:8px;
  min-height:42px;
}
.btn-primary{
  background:linear-gradient(135deg,#4c1d95,#7c3aed 52%,#c084fc);
  box-shadow:0 12px 26px rgba(124,58,237,.24);
}
.btn-outline{
  border:1px solid rgba(192,132,252,.38);
  background:rgba(255,255,255,.035);
}
.btn-discord{
  background:#4f46e5;
}
.card{
  background:linear-gradient(180deg,rgba(20,15,31,.92),rgba(8,7,12,.92));
  border-color:rgba(192,132,252,.18);
  box-shadow:0 16px 44px rgba(0,0,0,.22);
}
.card::before{
  background:linear-gradient(90deg,transparent,rgba(192,132,252,.75),transparent);
}
.main-wrapper{
  padding-top:72px;
}
.hero{
  min-height:78vh;
}
.hero-minimal{
  min-height:74vh;
}
.hero-bg{
  background:url('/assets/banner.gif') center/cover no-repeat;
  filter:brightness(.34) saturate(.95) contrast(1.08);
  transform:scale(1.02);
}
.hero-overlay{
  background:linear-gradient(180deg,rgba(3,2,7,.14),rgba(3,2,7,.88) 68%,#030207 100%);
}
.hero-logo{
  width:150px;
  height:150px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid rgba(192,132,252,.34);
  box-shadow:0 18px 70px rgba(0,0,0,.48),0 0 42px rgba(124,58,237,.24);
  margin-bottom:22px;
}
.hero h1{
  font-size:clamp(2.6rem,7vw,6rem);
  letter-spacing:0;
}
.hero p,.hero-eyebrow{
  display:none;
}
.glow{
  text-shadow:0 0 34px rgba(192,132,252,.42);
}
.home-store{
  margin-top:28px;
  padding-bottom:90px;
}
.section-head.compact{
  margin-bottom:24px;
}
.section-head.compact h2{
  font-size:1.7rem;
}
.products-grid-premium .product-card{
  padding:1rem;
}
.product-card h3{
  font-size:1rem;
  margin-bottom:8px;
}
.product-card p{
  height:42px;
  overflow:hidden;
  font-size:.86rem;
}
.product-img-wrap{
  border-radius:8px;
  background:#08060d;
}
.product-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:18px;
}
.product-price{
  color:#ddd6fe;
  font-size:1.15rem;
}
.badge-primary{
  color:#ddd6fe;
  background:rgba(124,58,237,.18);
}
.page-hero{
  padding:78px 0 34px;
  text-align:center;
}
.page-hero h1{
  font-size:clamp(2rem,5vw,3.7rem);
}
.community-wrap{
  padding-bottom:90px;
}
.community-toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  margin-bottom:22px;
}
.community-toolbar .form-control{
  max-width:340px;
}
.members-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));
  gap:14px;
}
.member-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border:1px solid rgba(192,132,252,.17);
  border-radius:8px;
  background:linear-gradient(180deg,rgba(18,13,29,.88),rgba(8,7,12,.88));
  transition:.25s;
}
.member-card:hover{
  transform:translateY(-2px);
  border-color:rgba(192,132,252,.42);
  box-shadow:0 16px 34px rgba(0,0,0,.22);
}
.member-card img{
  width:50px;
  height:50px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid rgba(192,132,252,.28);
}
.member-card h3{
  font-size:.95rem;
  line-height:1.3;
}
.member-card p{
  color:var(--muted);
  font-size:.78rem;
}
.empty-state i{
  font-size:2.2rem;
  color:var(--primary-2);
  margin-bottom:12px;
}
@media(max-width:768px){
  body{background-attachment:scroll;}
  .hero-logo{width:112px;height:112px;}
  .hero-minimal{min-height:66vh;}
  .community-toolbar{align-items:stretch;flex-direction:column;}
  .community-toolbar .form-control{max-width:none;}
}

/* Vice City RP neon theme */
:root{
  --primary:#00e5ff;
  --primary-2:#ff2bd6;
  --primary-3:#ffb703;
  --primary-dim:rgba(0,229,255,.14);
  --bg:#05070b;
  --bg-card:rgba(7,12,18,.82);
  --bg-card2:#07131a;
  --border:rgba(0,229,255,.24);
  --text:#f7fbff;
  --muted:#a8bac8;
  --info:#00e5ff;
  --shadow:0 20px 58px rgba(0,0,0,.38),0 0 34px rgba(0,229,255,.16),0 0 26px rgba(255,43,214,.1);
}

body{
  background:
    radial-gradient(ellipse at top,rgba(0,229,255,.1),transparent 36%),
    linear-gradient(180deg,rgba(5,7,11,.52),rgba(5,7,11,.94) 48%,#05070b 100%),
    url('/assets/banner.gif') center top/cover no-repeat fixed;
}

body::before{
  content:'';
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background:
    linear-gradient(90deg,rgba(0,229,255,.06) 1px,transparent 1px),
    linear-gradient(180deg,rgba(255,43,214,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 72%);
}

.navbar{
  background:rgba(4,9,14,.72);
  border-bottom:1px solid rgba(0,229,255,.2);
  box-shadow:0 18px 46px rgba(0,0,0,.28);
}

.logo-text{
  color:#fff;
  text-shadow:0 0 18px rgba(0,229,255,.32),0 0 24px rgba(255,43,214,.22);
}

.nav-logo-dot{
  width:10px;
  height:10px;
  border-radius:50%;
  background:var(--primary-3);
  box-shadow:0 0 16px var(--primary-3),0 0 24px var(--primary-2);
  flex:0 0 auto;
}

.nav-links a:hover,.nav-links a.active{
  color:#fff;
  background:linear-gradient(135deg,rgba(0,229,255,.12),rgba(255,43,214,.1));
  border-color:rgba(0,229,255,.28);
  box-shadow:0 0 20px rgba(0,229,255,.08);
}

.btn{
  position:relative;
  overflow:hidden;
}

.btn::after{
  content:'';
  position:absolute;
  inset:-60% auto -60% -30%;
  width:32%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);
  transform:skewX(-18deg);
  transition:.55s;
}

.btn:hover::after{
  left:115%;
}

.btn-primary{
  background:linear-gradient(135deg,#00a9c7,#00e5ff 42%,#ff2bd6);
  color:#021016;
  box-shadow:0 10px 28px rgba(0,229,255,.26),0 0 28px rgba(255,43,214,.16);
}

.btn-primary:hover{
  box-shadow:0 16px 36px rgba(0,229,255,.34),0 0 34px rgba(255,43,214,.24);
}

.btn-outline{
  border:1px solid rgba(0,229,255,.36);
  background:rgba(4,13,18,.62);
}

.btn-outline:hover{
  background:linear-gradient(135deg,rgba(0,229,255,.18),rgba(255,43,214,.14));
  box-shadow:0 0 28px rgba(0,229,255,.16);
}

.btn-discord{
  background:linear-gradient(135deg,#5865f2,#7c3aed);
}

.main-wrapper{
  padding-top:70px;
}

.hero-vice{
  min-height:calc(100vh - 70px);
  isolation:isolate;
}

.hero-vice .hero-bg{
  background:url('/assets/banner.gif') center/cover no-repeat;
  filter:brightness(.42) saturate(1.28) contrast(1.1);
  animation:vice-bg-drift 16s ease-in-out infinite alternate;
}

.hero-vice .hero-overlay{
  background:
    linear-gradient(180deg,rgba(5,7,11,.1),rgba(5,7,11,.74) 58%,#05070b 100%),
    linear-gradient(110deg,rgba(0,229,255,.2),transparent 34%,rgba(255,43,214,.16) 78%,transparent);
}

.vice-scanline{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.18;
  background:repeating-linear-gradient(180deg,transparent 0,transparent 7px,rgba(255,255,255,.12) 8px);
  mix-blend-mode:screen;
}

.server-mark{
  display:inline-flex;
  position:relative;
  margin-bottom:18px;
}

.server-mark::before{
  content:'';
  position:absolute;
  inset:12px;
  border-radius:8px;
  box-shadow:0 0 60px rgba(0,229,255,.28),0 0 44px rgba(255,43,214,.24);
  animation:vice-mark-pulse 2.7s ease-in-out infinite;
}

.hero-logo{
  width:96px;
  height:96px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid rgba(0,229,255,.42);
  box-shadow:0 16px 42px rgba(0,0,0,.42),0 0 24px rgba(0,229,255,.24);
  animation:vice-logo-float 4.5s ease-in-out infinite;
}

.hero-eyebrow{
  display:inline-flex;
  color:#fff;
  background:linear-gradient(135deg,rgba(0,229,255,.16),rgba(255,43,214,.12));
  border-color:rgba(0,229,255,.32);
  box-shadow:0 0 22px rgba(0,229,255,.12);
}

.hero h1{
  font-size:clamp(2.55rem,7vw,6.6rem);
  margin-bottom:1rem;
  letter-spacing:0;
}

.glow{
  color:#fff;
  text-shadow:0 0 18px rgba(0,229,255,.72),0 0 44px rgba(255,43,214,.42),0 0 78px rgba(255,183,3,.2);
}

.hero-copy{
  display:block!important;
  max-width:760px;
  color:#dceaf3;
  margin-bottom:1.5rem!important;
}

.hero-pills{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  margin:0 auto 2rem;
}

.hero-pills span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:7px 14px;
  border-radius:8px;
  border:1px solid rgba(255,183,3,.28);
  color:#fff6d0;
  background:rgba(255,183,3,.08);
  box-shadow:0 0 18px rgba(255,183,3,.08);
  font-size:.88rem;
  font-weight:700;
}

.section-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:var(--primary-3);
  font-size:.82rem;
  font-weight:900;
  text-transform:uppercase;
  margin-bottom:8px;
  text-shadow:0 0 16px rgba(255,183,3,.34);
}

.card,
.member-card{
  background:linear-gradient(180deg,rgba(8,18,25,.9),rgba(6,9,14,.9));
  border-color:rgba(0,229,255,.18);
}

.card::before{
  background:linear-gradient(90deg,transparent,rgba(0,229,255,.8),rgba(255,43,214,.75),transparent);
}

.card:hover{
  border-color:rgba(0,229,255,.46);
  box-shadow:0 20px 54px rgba(0,0,0,.3),0 0 28px rgba(0,229,255,.13);
}

.product-price,
.badge-primary{
  color:#9ff7ff;
}

.badge-primary{
  background:linear-gradient(135deg,rgba(0,229,255,.14),rgba(255,43,214,.12));
  border-color:rgba(0,229,255,.25);
}

.page-hero{
  position:relative;
  padding:86px 0 38px;
}

.community-hero::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  background:linear-gradient(180deg,rgba(0,229,255,.08),transparent 68%);
}

.members-grid{
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:12px;
}

.member-card{
  min-height:78px;
  padding:11px;
  box-shadow:0 12px 30px rgba(0,0,0,.24),0 0 18px rgba(0,229,255,.08);
  animation:member-neon 3.2s ease-in-out infinite;
}

.member-card:nth-child(3n+2){
  animation-delay:.45s;
}

.member-card:nth-child(3n+3){
  animation-delay:.9s;
}

.member-card:hover{
  transform:translateY(-5px) scale(1.015);
  border-color:rgba(255,43,214,.55);
  box-shadow:0 18px 42px rgba(0,0,0,.32),0 0 28px rgba(0,229,255,.22),0 0 22px rgba(255,43,214,.18);
}

.member-card img{
  width:48px;
  height:48px;
  border-radius:8px;
  border:1px solid rgba(0,229,255,.4);
  box-shadow:0 0 16px rgba(0,229,255,.16);
}

.member-card h3{
  color:#fff;
  font-size:.9rem;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.member-card p{
  color:#7defff;
  direction:ltr;
  text-align:right;
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.form-control{
  background:rgba(5,12,18,.78);
  border-color:rgba(0,229,255,.2);
}

.form-control:focus{
  border-color:rgba(0,229,255,.62);
  box-shadow:0 0 0 3px rgba(0,229,255,.12),0 0 22px rgba(0,229,255,.12);
}

.footer{
  background:linear-gradient(180deg,rgba(5,7,11,.76),#030506);
  border-top-color:rgba(0,229,255,.18);
}

@keyframes vice-bg-drift{
  from{transform:scale(1.02) translate3d(0,0,0)}
  to{transform:scale(1.07) translate3d(1.2%,-1%,0)}
}

@keyframes vice-logo-float{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-8px)}
}

@keyframes vice-mark-pulse{
  0%,100%{opacity:.5;transform:scale(.96)}
  50%{opacity:1;transform:scale(1.08)}
}

@keyframes member-neon{
  0%,100%{box-shadow:0 12px 30px rgba(0,0,0,.24),0 0 14px rgba(0,229,255,.08)}
  50%{box-shadow:0 14px 34px rgba(0,0,0,.28),0 0 24px rgba(0,229,255,.18),0 0 16px rgba(255,43,214,.12)}
}

@media(max-width:768px){
  .hero-vice{min-height:calc(100vh - 70px);}
  .hero-logo{width:82px;height:82px;}
  .hero h1{font-size:2.35rem;}
  .hero-copy{font-size:.98rem;}
  .hero-pills span{width:100%;justify-content:center;}
  .members-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .member-card{align-items:center;gap:9px;}
}

@media(max-width:420px){
  .members-grid{grid-template-columns:1fr;}
}