*,
*::before,
*::after {   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html,
body {   scroll-behavior: smooth;
   -webkit-text-size-adjust: 100%;
}

body {   font-family: 'Inter', sans-serif;
   background: #050816;
   color: #f8fafc;
   overflow-x: hidden;
   line-height: 1.7;
   min-height: 100vh;
}

img {   display: block;
   max-width: 100%;
   height: auto;
   user-select: none;
}

a {   text-decoration: none;
   color: inherit;
}

ul {   list-style: none;
}

button,
input,
textarea {   font: inherit;
   border: none;
   outline: none;
   background: none;
}

button {   cursor: pointer;
}

section {   position: relative;
   padding: 110px 0;
}

.container {   width: min(1280px, 92%);
   margin: auto;
   position: relative;
   z-index: 2;
}

:root {   --bg: #050816;
   --bg2: #0b1120;
   --surface: #0f172a;
   --surface2: #1e293b;
   --primary: #8b5cf6;
   --primary-light: #a855f7;
   --secondary: #06b6d4;
   --accent: #ec4899;
   --success: #22c55e;
   --warning: #f59e0b;
   --danger: #ef4444;
   --text: #f8fafc;
   --muted: #94a3b8;
   --white: #ffffff;
   --radius-sm: 10px;
   --radius: 18px;
   --radius-lg: 30px;
   --shadow-sm: 0 5px 18px rgba(0, 0, 0, .25);
   --shadow: 0 15px 40px rgba(0, 0, 0, .35);
   --shadow-lg: 0 30px 70px rgba(0, 0, 0, .55);
   --transition: .35s cubic-bezier(.4, 0, .2, 1);
}

body {   background:
      radial-gradient(circle at top, #28104d 0%, transparent 45%),
      radial-gradient(circle at bottom, #0a3b52 0%, transparent 40%),
      linear-gradient(135deg, #050816, #0f172a, #050816);
   background-size: cover;
   background-attachment: fixed;
}

::selection {   background: var(--primary);
   color: white;
}

::-webkit-scrollbar {   width: 13px;
}

::-webkit-scrollbar-track {   background: #090b13;
}

::-webkit-scrollbar-thumb {   background: linear-gradient(180deg,
         var(--primary),
         var(--secondary));
   border-radius: 100px;
}

::-webkit-scrollbar-thumb:hover {   background: linear-gradient(180deg,
         var(--accent),
         var(--primary));
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-family: 'Orbitron', sans-serif;
   font-weight: 700;
   line-height: 1.15;
}

h1 {
   font-size: clamp(3rem, 8vw, 6rem);
}

h2 {
   font-size: clamp(2rem, 5vw, 4rem);
}

h3 {
   font-size: 2rem;
}

p {
   color: var(--muted);
   font-size: 1.05rem;
}
.text-center {   text-align: center;
}

.text-left {
   text-align: left;
}

.text-right {
   text-align: right;
}

.w-100 {
   width: 100%;
}

.h-100 {
   height: 100%;
}

.round {
   border-radius: var(--radius);
}

.round-lg {
   border-radius: var(--radius-lg);
}

.shadow {
   box-shadow: var(--shadow);
}

.shadow-lg {
   box-shadow: var(--shadow-lg);
}

.relative {
   position: relative;
}

.absolute {
   position: absolute;
}

.overflow-hidden {
   overflow: hidden;
}

.mt-1 {   margin-top: 10px;
}

.mt-2 {   margin-top: 20px;
}

.mt-3 {   margin-top: 30px;
}

.mt-4 {   margin-top: 40px;
}

.mt-5 {   margin-top: 60px;
}

.mb-1 {   margin-bottom: 10px;
}

.mb-2 {   margin-bottom: 20px;
}

.mb-3 {   margin-bottom: 30px;
}

.mb-4 {   margin-bottom: 40px;
}

.mb-5 {   margin-bottom: 60px;
}

.pt-5 {   padding-top: 60px;
}

.pb-5 {   padding-bottom: 60px;
}

.d-flex {
   display: flex;
}

.flex-column {
   flex-direction: column;
}

.align-center {
   align-items: center;
}

.justify-center {
   justify-content: center;
}

.justify-between {
   justify-content: space-between;
}

.gap-1 {
   gap: 10px;
}

.gap-2 {
   gap: 20px;
}

.gap-3 {
   gap: 30px;
}

.grid {
   display: grid;
   gap: 30px;
}

.grid-2 {
   grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
   grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
   grid-template-columns: repeat(4, 1fr);
}

@media(max-width:992px) {
   .grid-2,
   .grid-3,
   .grid-4 {
      grid-template-columns: 1fr;
   }

}

.glass {
   background: rgba(255, 255, 255, .06);
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
   border: 1px solid rgba(255, 255, 255, .08);
   box-shadow: var(--shadow);
   border-radius: var(--radius);
}

.glass-dark {
   background: rgba(15, 23, 42, .65);
   backdrop-filter: blur(22px);
   border: 1px solid rgba(255, 255, 255, .05);
   border-radius: var(--radius);
}

.gradient {
   background: linear-gradient(90deg,
         var(--primary),
         var(--secondary));
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;
}

.gradient-pink {
   background: linear-gradient(90deg,
         var(--accent),
         var(--primary));
   --webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.neon {
   text-shadow:
      0 0 8px var(--primary),
      0 0 18px var(--primary),
      0 0 35px rgba(139, 92, 246, .4);
}

.neon-blue {
   text-shadow:
      0 0 8px var(--secondary),
      0 0 18px var(--secondary);
}

.btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 15px 35px;
   border-radius: 999px;
   font-weight: 700;
   font-size: 15px;
   transition: var(--transition);
   cursor: pointer;
   position: relative;
   overflow: hidden;
}

.btn::before {
   content: "";
   position: absolute;
   left: -100%;
   top: 0;
   width: 100%;
   height: 100%;
   background: rgba(255, 255, 255, .15);
   transition: .6s;
}

.btn:hover::before {
   left: 100%;
}

.btn-primary {
   background: linear-gradient(135deg,
         var(--primary),
         var(--secondary));
   color: white;
   box-shadow:

      0 0 25px rgba(139, 92, 246, .35);
}

.btn-primary:hover {
   transform: translateY(-5px);
   box-shadow:

      0 15px 40px rgba(139, 92, 246, .45);
}

.btn-secondary {
   background: transparent;
   border: 2px solid var(--primary);
   color: white;
}

.btn-secondary:hover {
   background: var(--primary);
   transform: translateY(-5px);
}

.btn-danger {
   background: linear-gradient(135deg,
         var(--danger),
         #ff8a8a);
   color: white;
}

.btn-success {
   background: linear-gradient(135deg,
         var(--success),
         #6dff97);
   color: #07130b;
}

.btn-warning {
   background: linear-gradient(135deg,
         var(--warning),
         #ffe18a);
   color: #111;
}

.btn-block {
   width: 100%;
}

.badge {
   display: inline-block;
   padding: 8px 18px;
   border-radius: 999px;
   font-size: 13px;
   font-weight: 700;
}

.badge-success {
   background: rgba(34, 197, 94, .2);
   color: #5eff8f;
}

.badge-danger {
   background: rgba(239, 68, 68, .18);
   color: #ff9c9c;
}

.badge-primary {
   background: rgba(139, 92, 246, .2);
   color: #d7b8ff;
}

.card {
   position: relative;
   padding: 30px;
   border-radius: var(--radius);
   background: var(--surface);
   transition: var(--transition);
   overflow: hidden;
}

.card::before {
   content: "";
   position: absolute;
   left: 0;
   top: 0;
   width: 100%;
   height: 4px;
   background: linear-gradient(90deg,
         var(--primary),
         var(--secondary));
}

.card:hover {
   transform: translateY(-10px);
   box-shadow:

      0 25px 60px rgba(0, 0, 0, .45);
}

.card-hover {
   transition: .4s;
}

.card-hover:hover {
   transform: scale(1.03);
}

.icon {
   width: 70px;
   height: 70px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: linear-gradient(135deg,
         var(--primary),
         var(--secondary));
   font-size: 28px;
   color: white;
   margin-bottom: 20px;
   box-shadow:

      0 10px 35px rgba(139, 92, 246, .35);
}

.img-cover {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.img-rounded {
   border-radius: var(--radius);
}

.img-shadow {
   box-shadow: var(--shadow);
}

.img-hover {
   transition: .5s;
}

.img-hover:hover {
   transform: scale(1.06);
}

.section-title {
   font-size: clamp(2rem, 4vw, 4rem);
   margin-bottom: 20px;
}

.section-subtitle {
   max-width: 700px;
   margin: auto;
   color: var(--muted);
   margin-bottom: 60px;
   font-size: 18px;
}

.navbar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 9999;
   padding: 18px 0;
   transition: .4s;
   background: rgba(5, 8, 22, .25);
   backdrop-filter: blur(18px);
   -webkit-backdrop-filter: blur(18px);
   border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.navbar.scrolled {
   padding: 12px 0;
   background: rgba(5, 8, 22, .88);
   box-shadow: 0 15px 40px rgba(0, 0, 0, .35);
}

.nav-container {
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.logo {
   display: flex;
   align-items: center;
   gap: 15px;
   font-size: 28px;
   font-weight: 800;
   font-family: 'Orbitron', sans-serif;
   color: white;
}

.logo img {
   width: 55px;
   height: 55px;
   object-fit: contain;
}

.nav-links {
   display: flex;
   align-items: center;
   gap: 35px;
}

.nav-links a {
   position: relative;
   font-weight: 600;
   font-size: 15px;
   transition: .35s;
}

.nav-links a:hover {
   color: var(--secondary);
}

.nav-links a::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -6px;
   width: 0;
   height: 2px;
   background: linear-gradient(90deg,

         var(--primary),

         var(--secondary));
   transition: .35s;
}

.nav-links a:hover::after {
   width: 100%;
}

.nav-btn {
   margin-left: 20px;
}

.hero {
   min-height: 100vh;
   display: flex;
   align-items: center;
   position: relative;
   overflow: hidden;
   padding-top: 120px;
}

.hero::before {
   content: "";
   position: absolute;
   inset: 0;
   background:

      linear-gradient(rgba(5, 8, 22, .55),

         rgba(5, 8, 22, .9));
   z-index: 0;
}

.hero::after {
   content: "";
   position: absolute;
   right: -300px;
   top: -250px;
   width: 700px;
   height: 700px;
   border-radius: 50%;
   background:

      radial-gradient(circle,

         rgba(139, 92, 246, .28),

         transparent);
   filter: blur(90px);
   animation: blob1 8s infinite alternate;
}

.hero-content {
   position: relative;
   z-index: 2;
   max-width: 700px;
}

.hero-subtitle {
   display: inline-block;
   padding: 10px 22px;
   background: rgba(139, 92, 246, .15);
   border: 1px solid rgba(139, 92, 246, .4);
   border-radius: 999px;
   font-size: 14px;
   margin-bottom: 25px;
}

.hero-title {
   font-size: clamp(3.5rem, 7vw, 6rem);
   font-weight: 900;
   margin-bottom: 20px;
   line-height: 1.05;
}

.hero-description {
   font-size: 19px;
   color: var(--muted);
   max-width: 620px;
   margin-bottom: 40px;
}

.hero-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 18px;
   margin-bottom: 50px;
}

.hero-image {
   position: relative;
   z-index: 2;
   display: flex;
   justify-content: center;
   align-items: center;
}

.hero-image img {   width: 100%;
   height: 90vh;
   border-radius: 5%;
   margin-top: 10vw;
   animation: float 5s ease-in-out infinite;
   filter:
      drop-shadow(0 30px 70px rgba(139, 92, 246, .45));
}

.hero-stats {
   display: flex;
   flex-wrap: wrap;
   gap: 35px;
   margin-top: 40px;
}

.stat-box {
   padding: 22px;
   min-width: 150px;
   border-radius: 18px;
   background: rgba(255, 255, 255, .05);
   border: 1px solid rgba(255, 255, 255, .05);
   backdrop-filter: blur(12px);
}

.stat-box h2 {
   font-size: 34px;
   margin-bottom: 8px;
}

.stat-box p {
   font-size: 14px;
}

.blob {
   position: absolute;
   border-radius: 50%;
   filter: blur(120px);
   opacity: .35;
   pointer-events: none;
}

.blob-purple {
   width: 450px;
   height: 450px;
   background: var(--primary);
   left: -150px;
   bottom: -120px;
   animation: blob2 10s infinite alternate;
}

.blob-blue {
   width: 500px;
   height: 500px;
   background: var(--secondary);
   right: -180px;
   top: 80px;
   animation: blob1 9s infinite alternate;
}

@keyframes float {
   0% {
      transform: translateY(0px);
   }

   50% {
      transform: translateY(-18px);
   }

   100% {
      transform: translateY(0px);
   }

}

@keyframes blob1 {
   0% {
      transform: translate(0, 0) scale(1);
   }

   100% {
      transform: translate(-60px, 50px) scale(1.2);
   }

}

@keyframes blob2 {
   0% {
      transform: translate(0, 0) scale(1);
   }

   100% {
      transform: translate(60px, -40px) scale(.9);
   }

}

.features {
   position: relative;
   padding: 120px 0;
}

.features-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 35px;
}

.feature-card {
   position: relative;
   padding: 40px;
   overflow: hidden;
   background: rgba(255, 255, 255, .04);
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 24px;
   transition: .45s;
   backdrop-filter: blur(18px);
}

.feature-card::before {
   content: "";
   position: absolute;
   left: -100%;
   top: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(90deg,

         transparent,

         rgba(255, 255, 255, .08),

         transparent);
   transition: .8s;
}

.feature-card:hover::before {
   left: 120%;
}

.feature-card:hover {
   transform: translateY(-12px);
   border-color: rgba(139, 92, 246, .45);
   box-shadow:

      0 30px 70px rgba(139, 92, 246, .18);
}

.feature-icon {
   width: 85px;
   height: 85px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 34px;
   border-radius: 20px;
   background: linear-gradient(135deg,

         var(--primary),

         var(--secondary));
   color: white;
   margin-bottom: 28px;
   box-shadow:

      0 15px 40px rgba(139, 92, 246, .4);
}

.feature-title {
   font-size: 26px;
   margin-bottom: 15px;
}

.feature-card p {
   font-size: 16px;
}

.stats {
   padding: 120px 0;
}

.stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 30px;
}

.stat-card {
   position: relative;
   padding: 45px;
   text-align: center;
   background: rgba(255, 255, 255, .05);
   border-radius: 22px;
   backdrop-filter: blur(18px);
   transition: .4s;
}

.stat-card:hover {
   transform: translateY(-10px);
   transition: 0.2s ease;
}

.stat-number {
   font-size: 6vh;
   font-weight: 0;
   font-family: 'Orbitron', sans-serif;
   background: linear-gradient(90deg,

         var(--primary),

         var(--secondary));
   --webkit-background-clip: text;
   -webkit-text-fill-color: #003B73;
   margin-bottom: 10px;
   border-radius: 50%;

}

.stat-label {
   font-size: 15px;
   letter-spacing: 1px;
   text-transform: uppercase;
   color: var(--muted);
}

.about {
   padding: 140px 0;
}

.about-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 70px;
   align-items: center;
}

.about-image {
   position: relative;
}

.about-image img {
   border-radius: 28px;
   box-shadow:

      0 30px 80px rgba(0, 0, 0, .45);
   transition: .5s;
}

.about-image:hover img {
   transform: scale(1.03);
}

.about-content h2 {
   margin-bottom: 25px;
}

.about-content p {
   margin-bottom: 25px;
}

.about-list {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 20px;
   margin-top: 40px;
}

.about-item {
   padding: 22px;
   border-radius: 18px;
   background: rgba(255, 255, 255, .05);
   display: flex;
   gap: 15px;
   align-items: center;
}

.about-item i {
   font-size: 24px;
   color: var(--secondary);
}

@media(max-width:1100px) {
   .stats-grid {
      grid-template-columns: repeat(2, 1fr);
   }

   .about-grid {
      grid-template-columns: 1fr;
   }

}

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

   .stats-grid {
      grid-template-columns: 1fr;
   }

   .hero-buttons {
      flex-direction: column;
   }

   .hero-buttons .btn {
      width: 100%;
   }

   .hero-stats {
      justify-content: center;
   }

   .nav-links {
      display: none;
   }

   .hero-image {
      margin-top: 60px;
   }

   .hero-title {
      font-size: 3rem;
   }

   .section-title {
      font-size: 2.4rem;
   }

}

.store {
   padding: 140px 0;
   position: relative;
   overflow: hidden;
}

.store-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
   gap: 40px;
}

.store-card {
   position: relative;
   background: rgba(255, 255, 255, .05);
   backdrop-filter: blur(18px);
   border-radius: 25px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, .08);
   transition: .45s;
}

.store-card:hover {
   transform: translateY(-15px);
   box-shadow:

      0 35px 80px rgba(139, 92, 246, .30);
}

.store-image {
   position: relative;
   height: 260px;
   overflow: hidden;
}

.store-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: .5s;
}

.store-card:hover .store-image img {
   transform: scale(1.12);
}

.store-image::after {
   content: "";
   position: absolute;
   inset: 0;
   background: linear-gradient(to top,

         rgba(5, 8, 22, .95),

         transparent);
}

.store-body {
   padding: 35px;
}

.store-title {
   font-size: 30px;
   margin-bottom: 15px;
}

.store-price {
   display: flex;
   align-items: center;
   gap: 12px;
   margin: 25px 0;
}

.price {
   font-size: 42px;
   font-weight: 800;
   color: var(--secondary);
}

.old-price {
   font-size: 22px;
   text-decoration: line-through;
   color: var(--muted);
}

.store-features {
   display: flex;
   flex-direction: column;
   gap: 15px;
   margin: 30px 0;
}

.store-feature {
   display: flex;
   align-items: center;
   gap: 12px;
}

.store-feature i {
   color: var(--success);
   font-size: 18px;
}

.store-btn {
   width: 100%;
}

.popular {
   position: absolute;
   top: 22px;
   right: -55px;
   background: linear-gradient(90deg,

         var(--warning),

         #ffd85a);
   color: #111;
   padding: 10px 70px;
   font-size: 13px;
   font-weight: 800;
   transform: rotate(45deg);
   box-shadow:

      0 8px 25px rgba(0, 0, 0, .35);
   z-index: 5;
}

.sale-banner {
   padding: 40px;
   margin-top: 70px;
   border-radius: 25px;
   background:

      linear-gradient(135deg,

         var(--primary),

         var(--secondary));
   display: flex;
   justify-content: space-between;
   align-items: center;
   gap: 40px;
   overflow: hidden;
   position: relative;
}

.sale-banner::before {
   content: "";
   position: absolute;
   left: -40%;
   top: 0;
   width: 40%;
   height: 100%;
   background: rgba(255, 255, 255, .15);
   transform: skewX(-30deg);
   animation: saleShine 4s infinite;
}

.sale-banner h2 {
   font-size: 42px;
}

.sale-banner p {
   color: white;
   font-size: 18px;
}

.tag {
   display: inline-flex;
   padding: 8px 16px;
   border-radius: 999px;
   font-size: 13px;
   font-weight: 700;
}

.tag-new {
   background: rgba(34, 197, 94, .18);
   color: #69ff9d;
}

.tag-sale {
   background: rgba(239, 68, 68, .18);
   color: #ff9e9e;
}

.tag-hot {
   background: rgba(245, 158, 11, .18);
   color: #ffd46f;
}

.store-card .btn {
   margin-top: 20px;
   opacity: .9;
   transition: .4s;
}

.store-card:hover .btn {
   opacity: 1;
   transform: translateY(-3px);
}

@keyframes saleShine {
   0% {
      left: -50%;
   }

   100% {
      left: 160%;
   }

}

.gallery {
   padding: 140px 0;
   position: relative;
}

.gallery-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
   gap: 30px;
}

.gallery-item {
   position: relative;
   overflow: hidden;
   border-radius: 25px;
   cursor: pointer;
   background: var(--surface);
   box-shadow: var(--shadow);
}

.gallery-item img {
   width: 100%;
   height: 300px;
   object-fit: cover;
   transition: .6s;
}

.gallery-item:hover img {
   transform: scale(1.15);
}

.gallery-overlay {
   position: absolute;
   inset: 0;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   background: linear-gradient(to top,

         rgba(5, 8, 22, .95),

         rgba(5, 8, 22, .35));
   opacity: 0;
   transition: .45s;
}

.gallery-item:hover .gallery-overlay {
   opacity: 1;
}

.gallery-overlay h3 {
   font-size: 30px;
   margin-bottom: 10px;
}

.gallery-overlay p {
   color: #ddd;
}

.gallery-overlay i {
   font-size: 55px;
   margin-bottom: 20px;
   color: white;
}

.video-section {
   padding: 140px 0;
}

.video-wrapper {
   position: relative;
   overflow: hidden;
   border-radius: 28px;
   box-shadow: var(--shadow-lg);
}

.video-wrapper img {
   width: 100%;
   display: block;
}

.play-button {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 110px;
   height: 110px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 42px;
   color: white;
   background: linear-gradient(135deg,

         var(--primary),

         var(--secondary));
   box-shadow:

      0 0 60px rgba(139, 92, 246, .6);
   transition: .4s;
}

.play-button:hover {
   transform: translate(-50%, -50%) scale(1.12);
}

.testimonials {
   padding: 140px 0;
}

.testimonial-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 35px;
}

.testimonial {
   padding: 35px;
   background: rgba(255, 255, 255, .05);
   border-radius: 22px;
   backdrop-filter: blur(16px);
   transition: .45s;
}

.testimonial:hover {
   transform: translateY(-10px);
}

.testimonial-stars {
   font-size: 22px;
   color: #ffd54f;
   margin-bottom: 20px;
}

.testimonial-text {
   font-style: italic;
   margin-bottom: 25px;
}

.testimonial-user {
   display: flex;
   align-items: center;
   gap: 18px;
}

.testimonial-user img {
   width: 65px;
   height: 65px;
   border-radius: 50%;
   object-fit: cover;
}

.testimonial-user h4 {
   font-size: 20px;
   margin-bottom: 4px;
}

.testimonial-user span {
   font-size: 14px;
   color: var(--muted);
}
.discord {
   padding: 120px 0;
}

.discord-box {
   padding: 60px;
   border-radius: 30px;
   background:

      linear-gradient(135deg,

         #5865F2,

         #7289DA);
   text-align: center;
   box-shadow:

      0 25px 70px rgba(88, 101, 242, .45);
}

.discord-box h2 {
   font-size: 46px;
   margin-bottom: 20px;
   color: white;
}

.discord-box p {
   font-size: 18px;
   color: white;
   margin-bottom: 35px;
}

.discord-btn {
   display: inline-flex;
   align-items: center;
   gap: 15px;
   padding: 18px 45px;
   background: white;
   color: #5865F2;
   font-weight: 700;
   border-radius: 999px;
   transition: .4s;
}

.discord-btn:hover {
   transform: translateY(-6px);
   box-shadow:

      0 15px 45px rgba(255, 255, 255, .35);
}

.staff {
   padding: 140px 0;
}

.staff-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 35px;
}

.staff-card {
   position: relative;
   overflow: hidden;
   padding: 35px;
   text-align: center;
   border-radius: 24px;
   background: rgba(255, 255, 255, .05);
   backdrop-filter: blur(16px);
   border: 1px solid rgba(255, 255, 255, .08);
   transition: .45s;
}

.staff-card:hover {
   transform: translateY(-12px);
   box-shadow: 0 25px 70px rgba(139, 92, 246, .25);
}

.staff-avatar {
   width: 130px;
   height: 130px;
   margin: auto;
   margin-bottom: 25px;
   border-radius: 50%;
   overflow: hidden;
   border: 4px solid var(--primary);
   box-shadow: 0 0 30px rgba(139, 92, 246, .35);
}

.staff-avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.staff-name {
   font-size: 28px;
   margin-bottom: 8px;
}

.staff-role {
   color: var(--secondary);
   font-weight: 700;
   margin-bottom: 20px;
}

.staff-social {
   display: flex;
   justify-content: center;
   gap: 15px;
   margin-top: 25px;
}

.staff-social a {
   width: 45px;
   height: 45px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: rgba(255, 255, 255, .08);
   transition: .35s;
}

.staff-social a:hover {
   background: var(--primary);
   transform: translateY(-5px);
}

.timeline {
   padding: 140px 0;
   position: relative;
}

.timeline::before {
   content: "";
   position: absolute;
   left: 50%;
   top: 0;
   width: 4px;
   height: 100%;
   background: linear-gradient(var(--primary),

         var(--secondary));
   transform: translateX(-50%);
}

.timeline-item {
   position: relative;
   width: 50%;
   padding: 30px 60px;
}

.timeline-item:nth-child(odd) {
   left: 0;
   text-align: right;
}

.timeline-item:nth-child(even) {
   left: 50%;
}

.timeline-content {
   padding: 30px;
   border-radius: 22px;
   background: rgba(255, 255, 255, .05);
   backdrop-filter: blur(18px);
   box-shadow: var(--shadow);
}

.timeline-dot {
   position: absolute;
   top: 45px;
   right: -15px;
   width: 28px;
   height: 28px;
   background: var(--primary);
   border-radius: 50%;
   box-shadow: 0 0 30px var(--primary);
}

.timeline-item:nth-child(even) .timeline-dot {
   left: -15px;
}

.faq {
   padding: 140px 0;
}

.faq-container {
   max-width: 900px;
   margin: auto;
   display: flex;
   flex-direction: column;
   gap: 22px;
}

.faq-item {
   background: rgba(255, 255, 255, .05);
   border-radius: 20px;
   overflow: hidden;
   border: 1px solid rgba(255, 255, 255, .06);
}

.faq-question {
   padding: 28px;
   display: flex;
   justify-content: space-between;
   align-items: center;
   cursor: pointer;
   font-weight: 700;
   font-size: 18px;
}

.faq-answer {
   padding: 0 28px 28px;
   color: var(--muted);
   display: none;
}

.faq-item.active .faq-answer {
   display: block;
}

.faq-item.active .faq-question {
   color: var(--secondary);
}

.footer {
   padding: 90px 0 35px;
   background: #03050c;
   border-top: 1px solid rgba(255, 255, 255, .06);
}

.footer-grid {
   display: grid;
   grid-template-columns: 2fr 1fr 1fr 1fr;
   gap: 45px;
}

.footer-logo {
   font-size: 34px;
   margin-bottom: 20px;
}

.footer-links {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.footer-links a {
   color: var(--muted);
   transition: .3s;
}

.footer-links a:hover {
   color: var(--secondary);
   padding-left: 8px;
}

.footer-bottom {
   margin-top: 60px;
   padding-top: 30px;
   border-top: 1px solid rgba(255, 255, 255, .06);
   display: flex;
   justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 20px;
}

.back-top {
   position: fixed;
   right: 30px;
   bottom: 30px;
   width: 60px;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: linear-gradient(135deg,

         var(--primary),

         var(--secondary));
   color: white;
   font-size: 22px;
   box-shadow: 0 15px 45px rgba(139, 92, 246, .35);
   opacity: 0;
   visibility: hidden;
   transition: .4s;
   z-index: 999;
}

.back-top.show {
   opacity: 1;
   visibility: visible;
}

.back-top:hover {
   transform: translateY(-8px) rotate(360deg);
}

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

   .timeline::before {
      left: 25px;
   }

   .timeline-item {
      width: 100%;
      left: 0 !important;
      padding-left: 70px;
      padding-right: 20px;
      text-align: left !important;
   }

   .timeline-dot {
      left: 11px !important;
      right: auto;
   }

}

.aurora {
   position: fixed;
   inset: 0;
   pointer-events: none;
   overflow: hidden;
   z-index: -2;
}

.aurora::before,

.aurora::after {
   content: "";
   position: absolute;
   width: 900px;
   height: 900px;
   border-radius: 50%;
   filter: blur(180px);
   opacity: .28;
   animation: auroraMove 18s ease-in-out infinite alternate;
}

.aurora::before {
   background: #8b5cf6;
   left: -250px;
   top: -200px;
}

.aurora::after {
   background: #06b6d4;
   right: -250px;
   bottom: -250px;
   animation-duration: 24s;
}

@keyframes auroraMove {
   0% {
      transform: translate(0, 0) scale(1);
   }

   100% {
      transform: translate(140px, -80px) scale(1.25);
   }

}

.glow-orb {
   position: absolute;
   border-radius: 50%;
   filter: blur(80px);
   pointer-events: none;
   animation: orbFloat 8s ease-in-out infinite;
   opacity: .25;
}

.glow-purple {
   background: var(--primary);
   width: 250px;
   height: 250px;
}

.glow-blue {
   background: var(--secondary);
   width: 220px;
   height: 220px;
}

.glow-pink {
   background: var(--accent);
   width: 180px;
   height: 180px;
}

@keyframes orbFloat {
   50% {
      transform: translateY(-35px);
   }

}

.loader {
   position: fixed;
   inset: 0;
   background: #050816;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 999999;
   transition: .6s;
}

.loader.hidden {
   opacity: 0;
   visibility: hidden;
}

.loader-ring {
   width: 95px;
   height: 95px;
   border-radius: 50%;
   border: 6px solid rgba(255, 255, 255, .08);
   border-top: 6px solid var(--primary);
   animation: spin 1s linear infinite;
}

@keyframes spin {
   100% {
      transform: rotate(360deg);
   }

}

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

.shine::after {
   content: "";
   position: absolute;
   left: -150%;
   top: 0;
   width: 50%;
   height: 100%;
   background: linear-gradient(90deg,

         transparent,

         rgba(255, 255, 255, .35),

         transparent);
   transform: skewX(-25deg);
   transition: .8s;
}

.shine:hover::after {
   left: 160%;
}

.border-gradient {
   position: relative;
   padding: 2px;
   border-radius: 22px;
   background: linear-gradient(135deg,

         var(--primary),

         var(--secondary),

         var(--accent));
}

.border-gradient>* {
   background: var(--surface);
   border-radius: 20px;
}

.mouse-glow {
   position: fixed;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   background: radial-gradient(circle,

         rgba(139, 92, 246, .12),

         transparent 70%);
   pointer-events: none;
   transform: translate(-50%, -50%);
   z-index: -1;
}

.fade-in {
   animation: fadeIn .8s both;
}

.slide-left {
   animation: slideLeft .8s both;
}

.slide-right {
   animation: slideRight .8s both;
}

.zoom {
   animation: zoom .8s both;
}

.rotate {
   animation: rotateCard .8s both;
}

@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }

}

@keyframes slideLeft {
   from {
      opacity: 0;
      transform: translateX(-60px);
   }

   to {
      opacity: 1;
      transform: none;
   }

}

@keyframes slideRight {
   from {
      opacity: 0;
      transform: translateX(60px);
   }

   to {
      opacity: 1;
      transform: none;
   }

}

@keyframes zoom {
   from {
      opacity: 0;
      transform: scale(.85);
   }

   to {
      opacity: 1;
      transform: scale(1);
   }

}

@keyframes rotateCard {
   from {
      opacity: 0;
      transform: rotate(-5deg) scale(.9);
   }

   to {
      opacity: 1;
      transform: none;
   }

}

.hover-up:hover {
   transform: translateY(-12px);
}

.hover-scale:hover {
   transform: scale(1.05);
}

.hover-rotate:hover {
   transform: rotate(2deg);
}

.hover-glow:hover {
   box-shadow:

      0 0 30px rgba(139, 92, 246, .45),

      0 0 80px rgba(139, 92, 246, .25);
}

.text-primary {   color: var(--primary);
}

.text-secondary {   color: var(--secondary);
}

.text-success {   color: var(--success);
}

.text-danger {   color: var(--danger);
}

.text-warning {   color: var(--warning);
}

.text-muted {   color: var(--muted);
}

.text-white {   color: white;
}

.bg-primary {   background: var(--primary);
}

.bg-secondary {   background: var(--secondary);
}

.bg-dark {   background: var(--surface);
}

.bg-glass {
   background: rgba(255, 255, 255, .05);
   backdrop-filter: blur(16px);
}

.d-none {   display: none;
}

.d-block {   display: block;
}

.d-flex {   display: flex;
}

.d-grid {   display: grid;
}

.flex-wrap {   flex-wrap: wrap;
}

.items-center {   align-items: center;
}

.justify-center {   justify-content: center;
}

.justify-between {   justify-content: space-between;
}

@media(max-width:768px) {
   .container {
      width: 94%;
   }

   .hero {
      text-align: center;
   }

   .hero-content {
      margin: auto;
   }

   .hero-image img {
      max-width: 330px;
   }

   .sale-banner {
      flex-direction: column;
      text-align: center;
   }

   .discord-box {
      padding: 40px 25px;
   }

   .store-grid,

   .gallery-grid,

   .staff-grid,

   .features-grid {
      grid-template-columns: 1fr;
   }

}

.marquee {
   width: 100%;
   overflow: hidden;
   white-space: nowrap;
   background: rgba(255, 255, 255, .04);
   padding: 18px 0;
}

.marquee span {
   display: inline-block;
   padding-left: 100%;
   animation: marquee 25s linear infinite;
}

@keyframes marquee {
   100% {
      transform: translateX(-200%);
   }

}

.online-dot {
   width: 12px;
   height: 12px;
   background: #00ff66;
   border-radius: 50%;
   box-shadow:

      0 0 15px #00ff66,

      0 0 35px #00ff66;
   animation: pulseOnline 2s infinite;
}

@keyframes pulseOnline {
   50% {
      transform: scale(1.5);
      opacity: .4;
   }

}

.copy-box {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20px;
   padding: 18px 25px;
   background: rgba(255, 255, 255, .05);
   border-radius: 18px;
   border: 1px solid rgba(255, 255, 255, .06);
}

.copy-ip {
   font-family: monospace;
   font-size: 18px;
}

.news-card {   overflow: hidden;
   border-radius: 24px;
   background: rgba(255, 255, 255, .05);
   transition: .45s;
}

.news-card:hover {   transform: translateY(-12px);
}

.news-image {   height: 240px;
   overflow: hidden;
}

.news-image img {   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: .6s;
}

.news-card:hover img {   transform: scale(1.15);
}

.news-body {   padding: 30px;
}

.role-owner {   color: #ff4d4d;
   font-weight: 700;
}

.role-admin {   color: #ffae00;
   font-weight: 700;
}

.role-mod {   color: #00d5ff;
   font-weight: 700;
}

.role-builder {   color: #7aff7a;
   font-weight: 700;
}

.table-dark {   width: 100%;
   border-collapse: collapse;
   background: rgba(255, 255, 255, .04);
   border-radius: 20px;
   overflow: hidden;
}

.table-dark th {   background: rgba(139, 92, 246, .25);
   padding: 18px;
}

.table-dark td {   padding: 18px;
   border-top: 1px solid rgba(255, 255, 255, .06);
}

.input {   width: 100%;
   padding: 16px 22px;
   background: rgba(255, 255, 255, .05);
   border-radius: 15px;
   border: 1px solid rgba(255, 255, 255, .06);
   color: white;
}

.input:focus {   border-color: var(--primary);
   box-shadow: 0 0 20px rgba(139, 92, 246, .3);
}

textarea.input {   resize: none;
   min-height: 180px;
}

.alert {   padding: 18px 22px;
   border-radius: 18px;
   margin: 20px 0;
}

.alert-success {   background: rgba(34, 197, 94, .12);
   border-left: 5px solid var(--success);
}

.alert-danger {   background: rgba(239, 68, 68, .12);
   border-left: 5px solid var(--danger);
}

.alert-warning {   background: rgba(245, 158, 11, .12);
   border-left: 5px solid var(--warning);
}

.progress {   height: 14px;
   background: #1b2335;
   border-radius: 999px;
   overflow: hidden;
}

.progress-bar {   height: 100%;
   background: linear-gradient(90deg,
         var(--primary),
         var(--secondary));
}

.tooltip-box {   position: relative;
   display: inline-block;
}

.tooltip-box:hover .tooltip {   opacity: 1;
   visibility: visible;
   transform: translateY(-8px);
}

.tooltip {   position: absolute;
   left: 50%;
   bottom: 120%;
   transform: translateX(-50%);
   padding: 10px 18px;
   background: #111827;
   border-radius: 10px;
   opacity: 0;
   visibility: hidden;
   transition: .35s;
   white-space: nowrap;
   font-size: 14px;
}

@media(width<500px) {   .hero-image img {      height: 50vh;
   }
}