/* ==============================================
   RESET & BASE
   ============================================== */

   html,
   body {
       margin: 0;
       padding: 0;
       min-height: 100vh;
   }
   
   html {
       font: 15px / 1.4 sans-serif;
       font-family: 'Roboto Flex', sans-serif;
       font-weight: 400;
       color: var(--text-color);
       word-wrap: break-word;
       background-color: var(--bg-color);
   }
   
   body {
       background-color: var(--bg-color);
       font-family: 'Roboto Flex', sans-serif;
       color: var(--text-color);
   }
   
   .body {
       background-color: var(--bg-color);
       background-image: url("https://cdn.finalrust.com/images/background02.png");
       background-size: cover;
       background-position: center top;
       background-attachment: fixed;
       background-repeat: no-repeat;
   }

   /* Category page only — strip background image, replace with dark gradient */
   .body:has(.category-page) {
       background-image: none;
       background: linear-gradient(160deg, #1a1a1d 0%, #111113 40%, #0a0a0b 100%);
   }
   
   a:hover {
       color: #fff;
       transition: var(--transition);
       text-decoration: none;
   }
   
   hr {
       border-color: #27272A;
   }
   
   input {
       background: var(--input);
       border-color: var(--border-color) !important;
       border-radius: var(--border-radius) !important;
   }
   
   :focus-visible {
       outline: 0;
   }
   
   input:focus-visible {
       outline-offset: 0px;
   }
   
   .container {
       position: relative;
       height: 100%;
   }
   
   @media only screen and (max-width: 768px) {
       .container {
           padding-left: 15px;
           padding-right: 15px;
       }
   }
   
   @media (min-width: 1536px) {
       .container {
           max-width: 1536px !important;
       }
   }
   
   
   /* ==============================================
      HEADER
      ============================================== */
   
   header {
       position: sticky !important;
       top: 0 !important;
       z-index: 1000 !important;
       background: rgba(8,8,10,0.88) !important;
       backdrop-filter: blur(14px) !important;
       -webkit-backdrop-filter: blur(14px) !important;
       border-bottom: 1px solid rgba(255,255,255,0.05) !important;
       padding: 0 !important;
   }
   
   /* Single-row header: logo | nav | account */
   .header-row {
       display: flex !important;
       align-items: center !important;
       height: 56px !important;
       gap: 16px !important;
   }
   
   .header-left {
       display: flex !important;
       align-items: center !important;
       gap: 10px !important;
       flex-shrink: 0 !important;
   }
   
   .header-nav {
       flex: 1 !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
   }
   
   ul.topbar-nav {
       display: flex !important;
       align-items: center !important;
       gap: 2px !important;
       list-style: none !important;
       margin: 0 !important;
       padding: 0 !important;
   }
   
   .header-logo {
       display: flex !important;
       align-items: center !important;
       flex-shrink: 0 !important;
   }
   
   .header-logo a {
       display: flex !important;
       align-items: center !important;
       line-height: 1 !important;
   }
   
   .header-logo img {
       display: block !important;
   }
   
   .social-media {
       display: flex !important;
       align-items: center !important;
       gap: 4px !important;
       list-style: none !important;
       margin: 0 !important;
       padding: 0 !important;
   }
   
   .header-account {
       display: flex !important;
       align-items: center !important;
       gap: 8px !important;
       flex-shrink: 0 !important;
   }
   
   .social-media li a i {
       font-size: 18px !important;
       color: #fff !important;
       padding: 0 !important;
       background: transparent !important;
       border-radius: 8px !important;
       width: 36px !important;
       height: 36px !important;
       text-align: center !important;
       line-height: 36px !important;
       border: 1px solid rgba(255,255,255,0.1) !important;
       transition: all 0.3s ease !important;
   }
   
   .social-media li a i:hover {
       border-color: rgba(126,231,135,0.3) !important;
       color: #7ee787 !important;
       background: rgba(126,231,135,0.05) !important;
   }
   
   .social-media li a.twitch i {
       background: transparent !important;
   }
   
   .social-media-item.discord i {
       background: transparent !important;
   }
   
   .social-media-item.youtube i {
       background: transparent !important;
   }
   
   .social-media-item.twitter i {
       background: transparent !important;
   }
   
   .social-media-item.instagram i {
       background: transparent !important;
   }
   
   .social-media-item.facebook i {
       background: transparent !important;
   }
   
   .header-item svg {
       height: 20px !important;
       width: 20px !important;
   }
   
   .header-item i {
       font-size: 16px !important;
   }
   
   .header-item {
       height: 36px !important;
       min-width: 36px !important;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: var(--spacing-xs);
       background: rgba(24,24,27,0.5) !important;
       border-radius: 8px !important;
       border: 1px solid rgba(126,231,135,0.1) !important;
       position: relative;
       transition: all 0.3s ease !important;
       backdrop-filter: blur(10px) !important;
       overflow: visible !important;
   }
   
   .header-item:hover {
       border-color: rgba(126,231,135,0.25) !important;
       background: rgba(126,231,135,0.05) !important;
   }
   
   .header-item:first-child {
       padding: 0;
       overflow: hidden !important;
       border-radius: 8px !important;
   }
   
   .header-cart {
       position: relative !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
   }
   
   span.cart-number {
       position: absolute;
       top: -8px !important;
       right: -10px !important;
       height: 18px !important;
       width: 18px !important;
       background: #7ee787 !important;
       color: #000 !important;
       border-radius: 50px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 12px !important;
       font-weight: 700 !important;
       line-height: 18px;
       z-index: 10 !important;
       box-shadow: 0 0 8px rgba(126,231,135,0.4) !important;
   }
   
   
   /* ==============================================
      NAVIGATION
      ============================================== */
   
   /* .topbar styles now handled by ul.topbar-nav via .header-nav */
   
   li.nav-item a {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 15px !important;
       font-weight: 700 !important;
       line-height: 20px;
       color: rgba(255,255,255,0.7) !important;
       text-transform: uppercase;
       display: flex;
       flex-direction: row;
       gap: 7px !important;
       align-items: center;
       letter-spacing: 2px !important;
       transition: all 0.2s ease !important;
       padding: 8px 16px !important;
       position: relative;
       border-radius: 8px !important;
   }
   
   li.nav-item a:hover {
       color: #9CFF1E !important;
       background: rgba(156,255,30,0.1) !important;
       text-shadow: 0 0 12px rgba(156,255,30,0.4) !important;
   }
   
   li.nav-item.active a {
       color: #9CFF1E !important;
       background: rgba(156,255,30,0.12) !important;
       text-shadow: 0 0 12px rgba(156,255,30,0.4) !important;
   }
   
   li.nav-item.active a::after {
       content: '';
       position: absolute;
       bottom: 2px;
       left: 50%;
       transform: translateX(-50%);
       width: 20px;
       height: 2px;
       background: #9CFF1E;
       border-radius: 2px;
       box-shadow: 0 0 8px rgba(156,255,30,0.6);
   }
   
   li.nav-item a .nav-icon {
       display: flex !important;
       align-items: center !important;
   }
   
   li.nav-item a i {
       opacity: 0.6 !important;
       transition: all 0.25s ease !important;
       font-size: 15px !important;
   }
   
   li.nav-item a:hover i,
   li.nav-item.active a i {
       opacity: 1 !important;
       color: #9CFF1E !important;
   }
   
   /* Nav dropdown menus */
   .menu-dropdown {
       background: rgba(24,24,27,0.95) !important;
       border: 1px solid rgba(126,231,135,0.1) !important;
       border-radius: 10px !important;
       backdrop-filter: blur(16px) !important;
       box-shadow: 0 12px 40px rgba(0,0,0,0.5) !important;
       margin-top: 8px !important;
       overflow: hidden !important;
   }
   
   .menu-dropdown a {
       padding: 10px 16px !important;
       border-radius: 0 !important;
   }
   
   .menu-dropdown a:hover {
       background: rgba(126,231,135,0.08) !important;
   }
   
   
   /* ==============================================
      MODULES & PANELS
      ============================================== */
   
   .module {
       background: linear-gradient(0deg, #18181B, #18181B), linear-gradient(180deg, rgba(39, 39, 42, 0.2) 0%, rgba(24, 24, 27, 0) 21.88%);
       border-radius: var(--border-radius);
       border: var(--border);
       box-shadow: var(--shadow);
       overflow: hidden;
   }
   
   .module-body {
       padding: var(--spacing-s);
   }
   
   h2.module-title {
       font-family: Rajdhani;
       font-size: 24px;
       font-weight: 700;
       line-height: 24px;
       text-align: left;
       text-transform: uppercase;
       color: #F4F4F5;
       position: absolute;
       margin-top: -24px;
       margin-left: 10px;
   }
   
   .home-content {
       background: linear-gradient(0deg, #18181B, #18181B), linear-gradient(180deg, rgba(39, 39, 42, 0.2) 0%, rgba(24, 24, 27, 0) 21.88%);
       border-radius: var(--border-radius);
       border: var(--border);
       box-shadow: var(--shadow);
       overflow: hidden;
   }
   
   .home-content-sec {
       padding: var(--spacing-m) var(--spacing-s);
   }
   
   h1.home-content-tit {
       font-family: Rajdhani;
       font-size: 60px;
       font-weight: 400;
       line-height: 60px;
       text-align: left;
       color: #F4F4F5;
       text-transform: uppercase;
   }
   
   .index-section {
       background: linear-gradient(0deg, #18181B, #18181B), linear-gradient(180deg, rgba(39, 39, 42, 0.2) 0%, rgba(24, 24, 27, 0) 21.88%);
       border-radius: var(--border-radius);
       border: var(--border);
       box-shadow: var(--shadow);
       overflow: hidden;
   }
   
   .index-section h1 {
       font-family: Rajdhani;
       font-size: 24px;
       font-weight: 700;
       line-height: 24px;
       text-transform: uppercase;
       color: #F4F4F5;
   }
   
   .index-section > h1 {
       text-align: left;
       position: absolute;
       margin-top: -24px;
       margin-left: 10px;
   }
   
   .index-section-body {
       padding: var(--spacing-m) var(--spacing-s);
   }
   
   .index-section-body p {
       margin-bottom: var(--spacing-s);
   }
   
   .index-section-body a {
       padding: var(--spacing-xs) var(--spacing-s);
       background: var(--button);
       color: #fff;
       border-radius: var(--border-radius);
       font-size: 16px;
       font-weight: 700;
       line-height: 20px;
       letter-spacing: 0.1em;
       text-align: left;
       font-family: 'Rajdhani';
       text-transform: uppercase;
   }
   
   
   /* ==============================================
      PAYMENT GOAL
      ============================================== */
   
   .payment-goal {
       background: var(--first-color);
       border-radius: 50px;
       width: 100%;
       height: 12px;
       overflow: hidden;
   }
   
   .progress-bar {
       border-top-left-radius: 50px;
       border-bottom-left-radius: 50px;
       height: 12px;
   }
   
   .goal-current {
       font-family: Roboto Flex;
       font-size: 24px;
       font-weight: 500;
       line-height: 32px;
       margin-bottom: var(--spacing-s);
   }
   
   .payment-goal-display {
       display: flex;
       justify-content: space-between;
   }
   
   .payment-goal-data {
       font-family: Roboto Flex;
       font-size: 16px;
       font-weight: 400;
       line-height: 24px;
       text-align: left;
       color: var(--text-color);
   }
   
   .payment-max {
       font-family: Roboto Flex;
       font-size: 16px;
       font-weight: 400;
       line-height: 24px;
       text-align: left;
       color: var(--text-color);
   }
   
   
   /* ==============================================
      BUTTONS
      ============================================== */
   
   .btn {
       font-weight: 700;
       padding: 0.5rem 1rem;
       border-radius: var(--border-radius);
       background: var(--button);
       border-color: var(--button);
       cursor: pointer;
       transition: var(--transition);
   }
   
   .btn:hover {
       background: var(--button);
       filter: contrast(0.8);
       transition: var(--transition);
   }
   
   .btn-gift {
       background: var(--button);
       border-color: var(--button);
       transition: var(--transition);
       border-radius: var(--border-radius);
   }
   
   button.add-btn {
       background: var(--button);
       padding: var(--spacing-xs) var(--spacing-s);
       border: var(--border);
       font-family: Rajdhani;
       font-size: 16px;
       font-weight: 700;
       line-height: 20px;
       letter-spacing: 0.1em;
       color: #fff;
       text-transform: uppercase;
   }
   
   a.add-btn {
       background: var(--button);
       padding: var(--spacing-xs) var(--spacing-s);
       border: 1px solid #FFFFFF66;
       font-family: Rajdhani;
       font-size: 16px;
       font-weight: 700;
       line-height: 20px;
       letter-spacing: 0.1em;
       color: #fff;
       text-transform: uppercase;
       width: 100%;
   }
   
   button#giftButton {
       background: #3374ed;
       padding: var(--spacing-xs) var(--spacing-s);
       border: var(--border);
       font-family: Rajdhani;
       font-size: 16px;
       font-weight: 700;
       line-height: 20px;
       letter-spacing: 0.1em;
       color: #fff;
       text-transform: uppercase;
   }
   
   button#purchaseFromGift {
       background: var(--button);
       padding: var(--spacing-xs) var(--spacing-s);
       border: var(--border);
       font-family: Rajdhani;
       font-size: 16px;
       font-weight: 700;
       line-height: 20px;
       letter-spacing: 0.1em;
       color: #fff;
       text-transform: uppercase;
   }
   
   button#closeGift {
       background: #e36060;
       padding: var(--spacing-xs) var(--spacing-s);
       border: var(--border);
       font-family: Rajdhani;
       font-size: 16px;
       font-weight: 700;
       line-height: 20px;
       letter-spacing: 0.1em;
       color: #fff;
       text-transform: uppercase;
   }
   
   .remove-btn {
       background: #E11D48;
       padding: var(--spacing-xs) var(--spacing-s);
       border: 1px solid #ffffff3d;
       font-family: Rajdhani;
       font-size: 16px;
       font-weight: 700;
       line-height: 20px;
       letter-spacing: 0.1em;
       color: #fff;
       text-transform: uppercase;
   }
   
   .btn-svg {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: var(--spacing-xs);
   }
   
   .btn-svg span {
       color: #FAFAFA;
       font-family: Rajdhani;
       font-size: 16px;
       font-weight: 700;
       line-height: 20px;
       text-align: left;
       text-transform: uppercase;
   }
   
   .btn-modal svg {
       height: 36px;
   }
   
   .btn-modal {
       width: 40px;
       padding: 0;
       height: 35px;
   }
   
   
   /* ==============================================
      ALERTS
      ============================================== */
   
   .error-msg {
       background: #d75252;
       margin: var(--spacing-s);
       border-radius: var(--border-radius);
       color: #fff;
       font-family: 'Rajdhani';
       margin-top: 0;
   }
   
   .success-msg {
       background: #52d787;
       margin: var(--spacing-s);
       border-radius: var(--border-radius);
       color: #fff;
       font-family: 'Rajdhani';
       margin-top: 0;
   }
   
   
   /* ==============================================
      CATEGORY / STORE
      ============================================== */
   
   .category-page {
       text-align: center !important;
       padding: 10px 0 0 !important;
   }
   
   h2.category-title {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 2.8rem !important;
       font-weight: 900 !important;
       line-height: 1.05 !important;
       text-align: center !important;
       color: #fff !important;
       text-transform: uppercase !important;
       letter-spacing: 2px !important;
       margin: 0 0 8px !important;
   }
   
   .category-description {
       font-family: 'Roboto Flex', sans-serif !important;
       font-size: 0.9rem !important;
       font-weight: 400 !important;
       line-height: 1.5 !important;
       text-align: center !important;
       color: rgba(255,255,255,0.4) !important;
       max-width: 500px;
       margin: 0 auto !important;
   }
   
   .category-packages {
       animation: homePageFadeUp 0.6s ease;
   }
   
   /* Section headers (Ranks / Classes) */
   .products-section-header {
       display: flex !important;
       align-items: center !important;
       gap: 14px !important;
       margin-top: 28px !important;
   }
   
   .products-section-label {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 1.1rem !important;
       font-weight: 700 !important;
       letter-spacing: 6px !important;
       text-transform: uppercase !important;
       color: rgba(255,255,255,0.6) !important;
       white-space: nowrap !important;
   }
   
   .products-section-line {
       flex: 1 !important;
       height: 1px !important;
       background: linear-gradient(90deg, rgba(255,255,255,0.06), transparent) !important;
   }
   
   .category-package {
       background: linear-gradient(135deg, rgba(45,45,50,0.9), rgba(28,28,32,0.95)) !important;
       border: 1px solid rgba(255,255,255,0.06) !important;
       border-radius: 12px !important;
       box-shadow: 0 2px 20px rgba(0,0,0,0.3) !important;
       position: relative !important;
       display: flex;
       flex-direction: column;
       transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
       overflow: hidden !important;
       min-height: 200px !important;
   }
   
   .category-package:hover {
       border-color: rgba(156,255,30,0.25) !important;
       transform: translateY(-4px) !important;
       box-shadow: 0 8px 30px rgba(0,0,0,0.4), 0 0 20px rgba(156,255,30,0.06) !important;
   }
   
   span.category-package-name {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 1.3rem !important;
       font-weight: 900 !important;
       line-height: 1.1 !important;
       text-align: center;
       color: #fff !important;
       letter-spacing: 2px !important;
       text-transform: uppercase !important;
       display: block !important;
   }
   
   .category-package-details {
       padding: var(--spacing-s) !important;
       position: relative !important;
       z-index: 1 !important;
   }
   
   .category-package-details a {
       text-decoration: none !important;
   }
   
   .category-package-img {
       padding: 0 !important;
       position: absolute !important;
       top: 50% !important;
       left: 50% !important;
       transform: translate(-50%, -50%) !important;
       width: 100% !important;
       height: 100% !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       z-index: 0 !important;
       pointer-events: none !important;
   }
   
   .package-img {
       max-height: none !important;
       height: 130% !important;
       width: auto !important;
       max-width: 140% !important;
       object-fit: contain !important;
       opacity: 0.14 !important;
       filter: drop-shadow(0 0 30px rgba(0,0,0,0.6)) !important;
       transition: opacity 0.3s ease, transform 0.3s ease !important;
       transform: rotate(-15deg) !important;
   }
   
   .category-package:hover .package-img {
       opacity: 0.18 !important;
       transform: rotate(-15deg) scale(1.08) !important;
   }
   .category-package[data-package-name*="All Ranks"] {
       grid-column: span 4 !important;
       border-top: 2px solid !important;
       border-image: linear-gradient(90deg, #ffd700, #ff69b4, #2dd4bf, #cc2020) 1 !important;
       background: linear-gradient(160deg, rgba(255,215,0,0.04) 0%, rgba(255,105,180,0.04) 33%, rgba(45,212,191,0.04) 66%, rgba(200,30,30,0.05) 100%) !important;
   }

   .category-package[data-package-name*="All Ranks"] .package-img {
    transform: rotate(0deg) !important;
}

.category-package[data-package-name*="All Ranks"]:hover .package-img {
    transform: rotate(0deg) scale(1.08) !important;
}

   /* Per-rank colored top border accents + background tints */
   .category-package[data-package-name*="MVP"] {
       border-top: 2px solid rgba(255,215,0,0.45) !important;
       background: linear-gradient(160deg, rgba(255,215,0,0.06) 0%, rgba(28,28,32,0.95) 40%) !important;
   }
   .category-package[data-package-name*="Supreme"] {
       border-top: 2px solid rgba(255,105,180,0.45) !important;
       background: linear-gradient(160deg, rgba(255,105,180,0.06) 0%, rgba(28,28,32,0.95) 40%) !important;
   }
   .category-package[data-package-name*="Prime"] {
       border-top: 2px solid rgba(45,212,191,0.45) !important;
       background: linear-gradient(160deg, rgba(45,212,191,0.06) 0%, rgba(28,28,32,0.95) 40%) !important;
   }
   .category-package[data-package-name*="Vanguard"] {
       border-top: 2px solid rgba(200,30,30,0.55) !important;
       background: linear-gradient(160deg, rgba(200,30,30,0.07) 0%, rgba(28,28,32,0.95) 40%) !important;
   }
   .category-package[data-package-name*="Component"],
   .category-package[data-package-name*="Turret"],
   .category-package[data-package-name*="Farmer"],
   .category-package[data-package-name*="Roamer"],
   .category-package[data-package-name*="Specialist"] {
       border-top: 2px solid rgba(156,255,30,0.35) !important;
       background: linear-gradient(160deg, rgba(156,255,30,0.05) 0%, rgba(28,28,32,0.95) 40%) !important;
   }

   /* All Ranks bundle — featured full-width horizontal layout */
   .category-package[data-package-name*="All Ranks"] .category-package-details {
       flex-direction: row !important;
       justify-content: flex-start !important;
       align-items: center !important;
       gap: 32px !important;
       padding: 24px 28px !important;
   }
   .category-package[data-package-name*="All Ranks"] .category-package-details > a {
       flex-shrink: 0 !important;
   }
   .category-package[data-package-name*="All Ranks"] .rank-benefits {
       padding: 0 !important;
       flex: 1 !important;
   }
   .category-package[data-package-name*="All Ranks"] .rank-benefits-list {
       display: grid !important;
       grid-template-columns: repeat(4, 1fr) !important;
       gap: 6px !important;
   }
   .category-package[data-package-name*="All Ranks"] .rank-benefits-title {
       margin-bottom: 12px !important;
   }

   .package-bott {
       display: flex;
       flex-direction: row;
       align-items: center;
       justify-content: space-between;
       align-content: center;
       padding: 14px var(--spacing-s) !important;
       border-top: 1px solid rgba(255,255,255,0.05) !important;
       position: relative;
       z-index: 1 !important;
       overflow: hidden;
       background: rgba(0,0,0,0.25) !important;
       border-bottom-left-radius: 12px !important;
       border-bottom-right-radius: 12px !important;
   }
   
   .category-package-price-list {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 14px !important;
       font-weight: 700 !important;
       line-height: 20px;
       text-align: left;
       color: #fff !important;
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       align-content: flex-start;
   }
   
   .category-package-price {
       font-size: 1.1rem !important;
       font-weight: 900 !important;
       color: #7ee787 !important;
   }
   
   .category-package-buttons {
       display: flex;
       align-items: center;
       flex-direction: row;
       gap: var(--spacing-xs);
   }
   
   .category-package-buttons a {
       border-radius: 6px !important;
       height: 35px;
   }
   
   .category-buy-btn {
       background: transparent !important;
       border: 1px solid rgba(156,255,30,0.3) !important;
       color: #9CFF1E !important;
       transition: all 0.3s ease !important;
   }
   
   .category-buy-btn:hover {
       background: rgba(156,255,30,0.1) !important;
       border-color: #9CFF1E !important;
       box-shadow: 0 0 12px rgba(156,255,30,0.2) !important;
   }
   
   .category-buy-btn .btn-svg span {
       color: #7ee787 !important;
   }
   
   .category-buy-btn .btn-svg svg path {
       fill: #7ee787 !important;
   }
   
   span.category-package-price-disc {
       color: #d96969 !important;
       font-size: 12px !important;
       text-decoration: line-through !important;
   }

   /* Rank Benefits on category cards */
   .rank-benefits {
       width: 100% !important;
       position: relative !important;
       z-index: 1 !important;
       padding: 0 12px !important;
   }
   
   .rank-benefits-title {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 0.7rem !important;
       font-weight: 700 !important;
       text-transform: uppercase !important;
       letter-spacing: 2px !important;
       color: #9CFF1E !important;
       margin-bottom: 8px !important;
       text-align: left !important;
   }
   
   .rank-benefits-title.rank-title-green {
       color: #9CFF1E !important;
   }
   
   .rank-benefits-title.rank-title-yellow {
       color: #ffd700 !important;
   }
   
   .rank-benefits-title.rank-title-pink {
       color: #ff69b4 !important;
   }
   
   .rank-benefits-title.rank-title-teal {
       color: #2dd4bf !important;
   }
   
   .rank-benefits-title.rank-title-red {
       color: #ff4444 !important;
   }

   .rank-benefits-title.rank-title-orange {
       background: linear-gradient(135deg, #FFA500, #FF4500) !important;
       -webkit-background-clip: text !important;
       -webkit-text-fill-color: transparent !important;
       background-clip: text !important;
       filter: drop-shadow(0 0 6px rgba(255, 120, 0, 0.4));
   }

   .rank-benefits-title.rank-title-red-gradient {
       background: linear-gradient(135deg, #ff2222, #8b0000) !important;
       -webkit-background-clip: text !important;
       -webkit-text-fill-color: transparent !important;
       background-clip: text !important;
       filter: drop-shadow(0 0 6px rgba(200, 0, 0, 0.5));
   }
   
   /* Orange highlight for All Ranks package name */
   .package-name-orange {
       color: #ff9500 !important;
       text-shadow: 0 0 12px rgba(255, 149, 0, 0.4) !important;
   }
   
   /* Muted description title */
   .rank-benefits-title.rank-title-muted {
       color: rgba(255, 255, 255, 0.4) !important;
       font-size: 0.65rem !important;
       letter-spacing: 1px !important;
       text-transform: none !important;
       font-weight: 500 !important;
       line-height: 1.3 !important;
   }
   
   
   .rank-benefits-list {
       display: flex !important;
       flex-direction: column !important;
       gap: 4px !important;
   }
   
   .rank-benefit-row {
       display: flex !important;
       justify-content: space-between !important;
       align-items: center !important;
       padding: 5px 10px !important;
       background: rgba(0,0,0,0.2) !important;
       border-radius: 6px !important;
       border: 1px solid rgba(255,255,255,0.04) !important;
   }
   
   .rank-benefit-label {
       font-family: 'Roboto Flex', sans-serif !important;
       font-size: 0.7rem !important;
       color: rgba(255,255,255,0.5) !important;
       text-transform: uppercase !important;
       letter-spacing: 0.5px !important;
   }
   
   .rank-benefit-value {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 0.85rem !important;
       font-weight: 700 !important;
       color: #7ee787 !important;
   }
   
   .rank-benefit-value.rank-color-yellow,
   .rank-benefit-label.rank-color-yellow {
       color: #ffd700 !important;
   }
   
   .rank-benefit-value.rank-color-pink,
   .rank-benefit-label.rank-color-pink {
       color: #ff69b4 !important;
   }
   
   .rank-benefit-value.rank-color-teal,
   .rank-benefit-label.rank-color-teal {
       color: #2dd4bf !important;
   }
   
   .rank-benefit-value.rank-color-red,
   .rank-benefit-label.rank-color-red {
       color: #ff4444 !important;
   }

   .rank-benefit-value.rank-color-orange,
   .rank-benefit-label.rank-color-orange {
       color: #FFA500 !important;
   }

   .rank-benefit-value.rank-color-red-gradient,
   .rank-benefit-label.rank-color-red-gradient {
       background: linear-gradient(135deg, #ff2222, #8b0000) !important;
       -webkit-background-clip: text !important;
       -webkit-text-fill-color: transparent !important;
       background-clip: text !important;
   }
   
   
   /* ==============================================
      PRODUCT PAGE
      ============================================== */
   
   .product-page,
   .product-description {
       background: linear-gradient(135deg, rgba(126,231,135,0.04), rgba(24,24,27,0.95)) !important;
       box-shadow: 0 4px 30px rgba(0,0,0,0.3) !important;
       border: 1px solid rgba(126,231,135,0.1) !important;
       border-radius: 12px !important;
       overflow: hidden !important;
   }
   
   .product-page-image {
       padding: var(--spacing-s) !important;
       background: rgba(0,0,0,0.2) !important;
       border-right: 1px solid rgba(126,231,135,0.06) !important;
   }
   
   img.product-img {
       max-height: 15rem;
       width: auto;
       filter: drop-shadow(0 4px 20px rgba(0,0,0,0.5)) !important;
   }
   
   .product-page-details {
       padding: var(--spacing-m) var(--spacing-s) !important;
   }
   
   .product-info {
       display: flex;
       justify-content: space-between;
       align-items: center;
   }
   
   .product-name {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 36px !important;
       font-weight: 700 !important;
       line-height: 36px;
       text-align: left;
       color: #fff !important;
   }
   
   .product-price {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 30px !important;
       font-weight: 700 !important;
       line-height: 30px;
       text-align: left;
       color: #7ee787 !important;
   }
   
   .product-price h3 {
       color: #7ee787 !important;
   }
   
   .product-details-top span {
       font-family: 'Roboto Flex', sans-serif !important;
       font-size: 16px !important;
       font-weight: 500 !important;
       line-height: 24px;
       text-align: left;
       color: var(--text-color) !important;
   }
   
   .small-title {
       display: flex;
       align-items: center;
   }
   
   .small-title span {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 24px !important;
       font-weight: 700 !important;
       line-height: 24px;
       text-align: left;
       color: #fff !important;
       text-transform: uppercase;
   }
   
   .small-title i {
       color: #7ee787 !important;
   }
   
   .small-title svg path {
       fill: #7ee787 !important;
   }
   
   span.product-det-border {
       width: 100%;
       background: rgba(126,231,135,0.1) !important;
       height: 2px !important;
       margin-left: var(--spacing-xs);
   }
   
   .product-description {
       padding: var(--spacing-m) !important;
   }
   
   /* Product page buttons */
   .product-buttons button.add-btn {
       background: transparent !important;
       border: 2px solid rgba(126,231,135,0.4) !important;
       color: #7ee787 !important;
       padding: 12px 28px !important;
       border-radius: 8px !important;
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 16px !important;
       font-weight: 700 !important;
       letter-spacing: 2px !important;
       text-transform: uppercase !important;
       cursor: pointer !important;
       transition: all 0.3s ease !important;
       position: relative !important;
       overflow: hidden !important;
   }
   
   .product-buttons button.add-btn:hover {
       background: #7ee787 !important;
       color: #000 !important;
       border-color: #7ee787 !important;
       box-shadow: 0 0 25px rgba(126,231,135,0.3) !important;
       transform: translateY(-2px) !important;
   }
   
   .product-buttons button#giftButton,
   .product-buttons .add-gift-btn {
       background: transparent !important;
       border: 2px solid rgba(88,166,255,0.4) !important;
       color: #58a6ff !important;
       padding: 12px 28px !important;
       border-radius: 8px !important;
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 16px !important;
       font-weight: 700 !important;
       letter-spacing: 2px !important;
       text-transform: uppercase !important;
       cursor: pointer !important;
       transition: all 0.3s ease !important;
   }
   
   .product-buttons button#giftButton:hover,
   .product-buttons .add-gift-btn:hover {
       background: #58a6ff !important;
       color: #000 !important;
       border-color: #58a6ff !important;
       box-shadow: 0 0 25px rgba(88,166,255,0.3) !important;
       transform: translateY(-2px) !important;
   }
   
   .product-buttons button#closeGift,
   .product-buttons .close-gift {
       background: transparent !important;
       border: 2px solid rgba(255,107,107,0.4) !important;
       color: #ff6b6b !important;
       padding: 12px 28px !important;
       border-radius: 8px !important;
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 16px !important;
       font-weight: 700 !important;
       letter-spacing: 2px !important;
       text-transform: uppercase !important;
       cursor: pointer !important;
       transition: all 0.3s ease !important;
   }
   
   .product-buttons button#closeGift:hover,
   .product-buttons .close-gift:hover {
       background: #ff6b6b !important;
       color: #000 !important;
       border-color: #ff6b6b !important;
       box-shadow: 0 0 25px rgba(255,107,107,0.3) !important;
   }
   
   /* Product page gift input */
   #giftActions input#idInput {
       background: rgba(24,24,27,0.8) !important;
       border: 1px solid rgba(126,231,135,0.15) !important;
       border-radius: 8px !important;
       color: #fff !important;
       padding: 10px 16px !important;
       font-family: 'Roboto Flex', sans-serif !important;
   }
   
   #giftActions input#idInput:focus {
       border-color: rgba(126,231,135,0.4) !important;
       box-shadow: 0 0 12px rgba(126,231,135,0.1) !important;
   }
   
   /* Product page dropdowns */
   .product-bot select,
   .product-bot input {
       background: rgba(24,24,27,0.8) !important;
       border: 1px solid rgba(126,231,135,0.15) !important;
       border-radius: 8px !important;
       color: #fff !important;
       transition: border-color 0.3s ease !important;
   }
   
   .product-bot select:focus,
   .product-bot input:focus {
       border-color: rgba(126,231,135,0.4) !important;
       box-shadow: 0 0 12px rgba(126,231,135,0.1) !important;
   }
   
   
   /* ==============================================
      ACCOUNT
      ============================================== */
   
   /* Account sidebar */
   .flex.flex-col.rounded-\[6px\].bg-\[--border-color\] {
       background: linear-gradient(135deg, rgba(126,231,135,0.05), rgba(24,24,27,0.9)) !important;
       border: 1px solid rgba(126,231,135,0.1) !important;
       border-radius: 12px !important;
       overflow: hidden !important;
       padding: 0 !important;
   }
   
   .flex.flex-col.rounded-\[6px\].bg-\[--border-color\] a {
       background: rgba(24,24,27,0.6) !important;
       border-bottom: 1px solid rgba(126,231,135,0.06) !important;
       transition: background 0.3s ease, border-color 0.3s ease !important;
       text-decoration: none !important;
   }
   
   .flex.flex-col.rounded-\[6px\].bg-\[--border-color\] a:last-child {
       border-bottom: none !important;
   }
   
   .flex.flex-col.rounded-\[6px\].bg-\[--border-color\] a:hover {
       background: rgba(126,231,135,0.08) !important;
   }
   
   /* Active sidebar tab - override bg-[--panel-body] removal */
   .flex.flex-col.rounded-\[6px\].bg-\[--border-color\] a .absolute {
       background: #7ee787 !important;
       border-radius: 0 4px 4px 0 !important;
       box-shadow: 0 0 12px rgba(126,231,135,0.4) !important;
   }
   
   /* Account content rows (orders, subscriptions, inventory) */
   .flex.justify-between.ml-4.mb-4 .grid.grid-cols-12.bg-\[--panel-body\] {
       background: linear-gradient(135deg, rgba(126,231,135,0.04), rgba(24,24,27,0.9)) !important;
       border: 1px solid rgba(126,231,135,0.1) !important;
       border-radius: 12px !important;
       padding: 12px !important;
       margin-bottom: 8px !important;
       transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease !important;
   }
   
   .flex.justify-between.ml-4.mb-4 .grid.grid-cols-12.bg-\[--panel-body\]:hover {
       border-color: rgba(126,231,135,0.25) !important;
       transform: translateY(-2px) !important;
       box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 20px rgba(126,231,135,0.08) !important;
   }
   
   /* Account item product name */
   .flex.justify-between.ml-4.mb-4 .font-bold.text-zinc-100.text-\[20px\] {
       color: #ffffff !important;
   }
   
   /* Account item price */
   .flex.justify-between.ml-4.mb-4 .text-2xl.font-bold {
       color: #7ee787 !important;
       text-shadow: 0 0 8px rgba(126,231,135,0.3) !important;
   }
   
   /* Account action links (View subscription, etc.) */
   .flex.justify-between.ml-4.mb-4 .text-\[--main-color\] {
       color: #7ee787 !important;
       transition: color 0.3s ease, text-shadow 0.3s ease !important;
   }
   
   .flex.justify-between.ml-4.mb-4 .text-\[--main-color\]:hover {
       text-shadow: 0 0 12px rgba(126,231,135,0.5) !important;
   }
   
   /* Cancel subscription button */
   .flex.justify-between.ml-4.mb-4 .text-red-500 {
       color: #ff6b6b !important;
       transition: color 0.3s ease !important;
   }
   
   .flex.justify-between.ml-4.mb-4 .text-red-500:hover {
       color: #ff4444 !important;
       text-shadow: 0 0 12px rgba(255,68,68,0.4) !important;
   }
   
   /* Subscription detail title */
   .flex.justify-between.ml-4.mb-4 .text-\[40px\] {
       color: #ffffff !important;
       text-shadow: 0 0 20px rgba(126,231,135,0.15) !important;
   }
   
   /* Account item images */
   .flex.justify-between.ml-4.mb-4 img.w-\[96px\] {
       border-radius: 8px !important;
       border: 1px solid rgba(126,231,135,0.1) !important;
   }
   
   /* Account item status text */
   .flex.justify-between.ml-4.mb-4 .text-sm.capitalize {
       color: rgba(126,231,135,0.7) !important;
   }
   
   /* Account timestamps */
   .flex.justify-between.ml-4.mb-4 .text-base.font-\[Rajdhani\] {
       color: rgba(255,255,255,0.6) !important;
   }
   
   
   /* ==============================================
      CART
      ============================================== */
   
   span.cart-page-title {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 48px !important;
       font-weight: 900 !important;
       line-height: 48px !important;
       text-align: left !important;
       color: #fff !important;
       text-transform: uppercase !important;
       letter-spacing: 2px !important;
   }
   
   .nr-item {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 20px !important;
       font-weight: 600 !important;
       line-height: 24px;
       align-self: center;
       color: rgba(255,255,255,0.5) !important;
   }
   
   .subtotal {
       background: linear-gradient(135deg, rgba(126,231,135,0.05), rgba(24,24,27,0.9)) !important;
       border: 1px solid rgba(126,231,135,0.1) !important;
       border-radius: 12px !important;
       padding: 20px !important;
   }
   
   .subtotal span {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 18px !important;
       font-weight: 700 !important;
       line-height: 24px;
       text-align: left;
       color: rgba(255,255,255,0.5) !important;
       text-transform: uppercase;
   }
   
   .subtotal p {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 22px !important;
       font-weight: 900 !important;
       line-height: 24px;
       text-align: right;
       color: #7ee787 !important;
   }
   
   /* Cart checkout button */
   .subtotal + div a.add-btn,
   div.subtotal ~ div a.add-btn {
       background: transparent !important;
       border: 2px solid rgba(126,231,135,0.4) !important;
       color: #7ee787 !important;
       border-radius: 8px !important;
       font-family: 'Rajdhani', sans-serif !important;
       font-weight: 700 !important;
       letter-spacing: 2px !important;
       text-transform: uppercase !important;
       transition: all 0.3s ease !important;
       text-align: center !important;
       padding: 12px !important;
   }
   
   .subtotal + div a.add-btn:hover,
   div.subtotal ~ div a.add-btn:hover {
       background: #7ee787 !important;
       color: #000 !important;
       border-color: #7ee787 !important;
       box-shadow: 0 0 25px rgba(126,231,135,0.3) !important;
   }
   
   /* Cart remove all button */
   a.remove-btn {
       background: transparent !important;
       border: 1px solid rgba(255,107,107,0.3) !important;
       color: #ff6b6b !important;
       border-radius: 8px !important;
       font-family: 'Rajdhani', sans-serif !important;
       transition: all 0.3s ease !important;
   }
   
   a.remove-btn:hover {
       background: rgba(255,107,107,0.1) !important;
       border-color: #ff6b6b !important;
       color: #ff6b6b !important;
   }
   
   /* Cart remove item button */
   .rem-btn {
       color: rgba(255,255,255,0.3) !important;
       transition: color 0.3s ease !important;
   }
   
   .rem-btn:hover {
       color: #ff6b6b !important;
   }
   
   /* Cart checkout button */
   a.cart-checkout-btn {
       display: inline-flex !important;
       align-items: center !important;
       justify-content: center !important;
       gap: 10px !important;
       width: 100% !important;
       padding: 14px 28px !important;
       background: transparent !important;
       color: #7ee787 !important;
       border: 2px solid rgba(126,231,135,0.4) !important;
       border-radius: 8px !important;
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 1rem !important;
       font-weight: 700 !important;
       letter-spacing: 2px !important;
       text-transform: uppercase !important;
       text-decoration: none !important;
       transition: all 0.3s ease !important;
       position: relative !important;
       overflow: hidden !important;
   }
   
   a.cart-checkout-btn span,
   a.cart-checkout-btn i {
       position: relative !important;
       z-index: 2 !important;
       transition: color 0.3s ease !important;
   }
   
   a.cart-checkout-btn::before {
       content: '' !important;
       position: absolute !important;
       inset: 0 !important;
       background: #7ee787 !important;
       transform: scaleX(0) !important;
       transform-origin: left !important;
       transition: transform 0.35s ease !important;
       z-index: 1 !important;
   }
   
   a.cart-checkout-btn:hover::before {
       transform: scaleX(1) !important;
   }
   
   a.cart-checkout-btn:hover {
       border-color: #7ee787 !important;
       box-shadow: 0 0 25px rgba(126,231,135,0.3) !important;
   }
   
   a.cart-checkout-btn:hover span,
   a.cart-checkout-btn:hover i {
       color: #000 !important;
   }
   
   /* Cart divider */
   hr {
       border-color: rgba(126,231,135,0.1) !important;
   }
   
   
   /* ==============================================
      TABLE
      ============================================== */
   
   table {
       max-width: 100%;
       background-color: transparent;
       width: 100%;
   }
   
   .table > thead > tr > th,
   .table > tbody > tr > th,
   .table > tfoot > tr > th,
   .table > thead > tr > td,
   .table > tbody > tr > td,
   .table > tfoot > tr > td {
       padding: 15px 8px;
       line-height: 1.42857143;
       vertical-align: top;
       text-align: left;
       align-content: center;
   }
   
   table tbody td {
       vertical-align: middle;
   }
   
   table > thead > tr > th {
       vertical-align: bottom;
       text-transform: uppercase;
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 12px !important;
       font-weight: 700 !important;
       line-height: 16px;
       text-align: left;
       color: rgba(255,255,255,0.35) !important;
       letter-spacing: 1.5px !important;
   }
   
   table tbody .image {
       width: 10%;
       text-align: center;
       align-content: center;
   }
   
   table tbody .name {
       width: 100%;
       text-align: center;
       height: 100%;
       display: flex;
       align-items: flex-start;
       justify-content: center;
       margin-left: var(--spacing-xs);
   }
   
   table tbody .options { width: 25%; text-align: center; }
   table tbody .price   { width: 15%; text-align: center; }
   table tbody .quantity { width: 5%;  text-align: center; }
   table tbody .total   { width: 15%; text-align: center; }
   table tbody .close   { width: 5%;  text-align: center; }
   
   table input {
       width: 40px;
       text-align: center;
   }
   
   tbody tr {
       background: linear-gradient(135deg, rgba(126,231,135,0.03), rgba(24,24,27,0.9)) !important;
       border-top: 6px solid transparent !important;
       border-radius: 8px !important;
   }
   
   tbody tr:first-child {
       border: none;
   }
   
   td.image {
       background: rgba(0,0,0,0.2) !important;
       padding: var(--spacing-xs) !important;
       border-radius: 8px 0 0 8px !important;
   }
   
   td.image img,
   td.image .product-img {
       height: 65px;
       width: auto;
       border-radius: 6px !important;
   }
   
   td.name {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       align-content: center;
       gap: var(--spacing-xs);
   }
   
   span.product-name {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 20px !important;
       font-weight: 700 !important;
       line-height: 24px;
       text-align: left;
       color: #fff !important;
   }
   
   .name-sec {
       font-family: 'Roboto Flex', sans-serif !important;
       font-size: 14px !important;
       font-weight: 500 !important;
       line-height: 20px;
       text-align: left;
       color: rgba(255,255,255,0.4) !important;
   }
   
   td.price span {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 20px !important;
       font-weight: 700 !important;
       line-height: 24px;
       text-align: left;
       color: rgba(255,255,255,0.5) !important;
   }
   
   td.total span {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 20px !important;
       font-weight: 700 !important;
       line-height: 24px;
       text-align: left;
       color: #7ee787 !important;
   }
   
   td.close {
       align-content: center;
   }
   
   table tbody .close a i {
       font-size: 20px;
       font-weight: 600;
       color: rgba(255,255,255,0.3) !important;
       transition: color 0.3s ease !important;
   }
   
   table tbody .close a:hover i {
       color: #ff6b6b !important;
   }
   
   
   /* ==============================================
      FOOTER
      ============================================== */
   
   footer {
       background: var(--footer-bg);
       padding: var(--spacing-m) 0;
       border-top: 1px solid var(--border-color);
   }
   
   .footer-copyright {
       font-family: Rajdhani;
       font-size: 16px;
       font-weight: 700;
       line-height: 24px;
   }
   
   .footer-copyright span {
       font-family: Rajdhani;
       font-size: 16px;
       font-weight: 700;
       line-height: 24px;
       color: #71717A;
       text-transform: uppercase;
   }
   
   .footer-links a {
       font-family: Rajdhani;
       font-size: 16px;
       font-weight: 700;
       line-height: 24px;
       text-align: left;
       text-transform: uppercase;
   }
   
   
   /* ==============================================
      ANIMATIONS
      ============================================== */
   
   @keyframes moveStripes {
       0%   { background-position: 0 0; }
       100% { background-position: 40px 0; }
   }
   
   @keyframes pulseOpacity {
       0%, 100% { opacity: 1; }
       50%      { opacity: 0.5; }
   }
   
   @keyframes homePageFadeUp {
       from { opacity: 0; transform: translateY(20px); }
       to   { opacity: 1; transform: translateY(0); }
   }
   
   @keyframes homePageGlow {
       0%, 100% { text-shadow: 0 0 20px rgba(156,255,30,0.5), 0 0 40px rgba(156,255,30,0.2); }
       50%      { text-shadow: 0 0 35px rgba(156,255,30,0.8), 0 0 70px rgba(156,255,30,0.4); }
   }
   
   
   /* ==============================================
      HOMEPAGE — HERO BANNER
      ============================================== */
   
   .hero-banner {
       text-align: center !important;
       padding: 80px 10px 50px !important;
       animation: homePageFadeUp 0.8s ease;
       position: relative !important;
   }
   
   .hero-banner .hero-inner {
       max-width: 700px;
       margin: 0 auto;
   }
   
   .hero-banner .hero-tag {
       font-size: 0.75rem !important;
       font-weight: 700 !important;
       letter-spacing: 5px !important;
       color: #9CFF1E !important;
       margin-bottom: 18px !important;
       font-family: 'Rajdhani', sans-serif !important;
       text-transform: uppercase;
       text-shadow: 0 0 20px rgba(156,255,30,0.3) !important;
   }
   
   .hero-banner .hero-title {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 3.8rem !important;
       font-weight: 900 !important;
       line-height: 1 !important;
       color: #fff !important;
       text-transform: uppercase !important;
       letter-spacing: 3px !important;
       margin: 0 0 20px !important;
   }
   
   .hero-banner .hero-accent {
       display: block !important;
       color: #9CFF1E !important;
       font-size: 4.5rem !important;
       animation: homePageGlow 3s ease-in-out infinite;
   }
   
   .hero-banner .hero-sub {
       font-size: 1rem !important;
       color: rgba(255,255,255,0.55) !important;
       line-height: 1.6 !important;
       margin: 0 auto 28px !important;
       max-width: 520px;
   }
   
   .hero-banner .hero-divider {
       width: 60px !important;
       height: 2px !important;
       background: linear-gradient(90deg, transparent, #7ee787, transparent) !important;
       margin: 0 auto 28px !important;
   }
   
   .hero-banner .hero-btn {
       display: inline-flex !important;
       align-items: center !important;
       gap: 10px !important;
       padding: 12px 32px !important;
       background: transparent !important;
       color: #7ee787 !important;
       border: 1px solid rgba(126,231,135,0.4) !important;
       border-radius: 8px !important;
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 0.9rem !important;
       font-weight: 700 !important;
       letter-spacing: 2px !important;
       text-transform: uppercase !important;
       text-decoration: none !important;
       transition: all 0.3s ease !important;
       position: relative !important;
       overflow: hidden !important;
   }
   
   .hero-btn {
       position: relative !important;
       overflow: hidden !important;
   }
   
   .hero-btn span,
   .hero-btn i {
       position: relative;
       z-index: 2;
       transition: color 0.3s ease;
   }
   
   .hero-btn::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       bottom: 0;
       width: 0;
       background: #7ee787;
       transition: width 0.35s ease;
       z-index: 1;
   }
   
   .hero-btn:hover::before {
       width: 100%;
   }
   
   .hero-btn:hover {
       border-color: #7ee787 !important;
       box-shadow: 0 0 25px rgba(126,231,135,0.3) !important;
       transform: translateY(-2px);
   }
   
   .hero-btn:hover span,
   .hero-btn:hover i {
       color: #000 !important;
   }
   
   .hero-btn.small {
       padding: 8px 20px !important;
       font-size: 0.8rem !important;
   }
   
   .hero-btn.hero-btn-lg {
       padding: 18px 52px !important;
       font-size: 1.1rem !important;
       letter-spacing: 3px !important;
       border-width: 2px !important;
       border-radius: 10px !important;
       box-shadow: 0 0 30px rgba(126,231,135,0.2) !important;
   }
   
   .hero-btn.hero-btn-lg:hover {
       box-shadow: 0 0 50px rgba(126,231,135,0.4), 0 10px 30px rgba(0,0,0,0.4) !important;
   }
   
   
   /* ==============================================
      HOMEPAGE — STATS ROW
      ============================================== */
   
   .stats-row {
       display: flex !important;
       gap: 10px !important;
       margin-bottom: 30px !important;
       animation: homePageFadeUp 1s ease;
   }
   
   .stats-row .stat-card {
       flex: 1 !important;
       background: linear-gradient(135deg, rgba(126,231,135,0.07), rgba(126,231,135,0.02)) !important;
       border: 1px solid rgba(126,231,135,0.12) !important;
       border-radius: 12px !important;
       padding: 20px 12px !important;
       text-align: center !important;
       transition: border-color 0.3s ease, transform 0.3s ease;
   }
   
   .stats-row .stat-card:hover {
       border-color: rgba(126,231,135,0.3) !important;
       transform: translateY(-2px);
   }
   
   .stats-row .stat-card.accent {
       background: linear-gradient(135deg, rgba(88,166,255,0.08), rgba(88,166,255,0.02)) !important;
       border-color: rgba(88,166,255,0.15) !important;
   }
   
   .stats-row .stat-card.accent:hover {
       border-color: rgba(88,166,255,0.35) !important;
   }
   
   .stats-row .stat-value {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 1.8rem !important;
       font-weight: 900 !important;
       color: #fff !important;
       line-height: 1 !important;
       margin-bottom: 6px !important;
   }
   
   .stats-row .stat-card.accent .stat-value {
       color: #58a6ff !important;
       font-size: 1.2rem !important;
   }
   
   .stats-row .stat-label {
       font-size: 0.65rem !important;
       color: rgba(255,255,255,0.35) !important;
       text-transform: uppercase !important;
       letter-spacing: 1.5px !important;
       font-weight: 600 !important;
   }
   
   
   /* ==============================================
      HOMEPAGE — HERO SPLIT LAYOUT
      ============================================== */
   
   .hero-split {
       display: flex !important;
       align-items: center !important;
       min-height: calc(100vh - 70px) !important;
       padding: 0 60px !important;
       gap: 60px !important;
       animation: homePageFadeUp 0.8s ease;
   }
   
   .hero-split-left {
       flex: 1 !important;
       text-align: left !important;
   }
   
   .hero-split-left .hero-title {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 3.8rem !important;
       font-weight: 900 !important;
       line-height: 1 !important;
       color: #fff !important;
       text-transform: uppercase !important;
       letter-spacing: 3px !important;
       margin: 0 0 20px !important;
   }
   
   .hero-split-left .hero-accent {
       display: block !important;
       color: #9CFF1E !important;
       font-size: 4.5rem !important;
       animation: homePageGlow 3s ease-in-out infinite;
   }
   
   .hero-split-left .hero-sub {
       font-size: 1rem !important;
       color: rgba(255,255,255,0.55) !important;
       line-height: 1.6 !important;
       margin: 0 0 28px !important;
       max-width: 480px !important;
   }
   
   .hero-split-left .hero-divider {
       width: 60px !important;
       height: 2px !important;
       background: linear-gradient(90deg, transparent, #7ee787, transparent) !important;
       margin: 0 0 28px !important;
   }
   
   .hero-split-right {
       flex: 1 !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
   }
   
   .hero-split-left .hero-btn {
       display: inline-flex !important;
       align-items: center !important;
       gap: 10px !important;
       color: #9CFF1E !important;
       border-color: rgba(156,255,30,0.4) !important;
       text-decoration: none !important;
       font-family: 'Rajdhani', sans-serif !important;
       font-weight: 700 !important;
       text-transform: uppercase !important;
       background: transparent !important;
       transition: all 0.3s ease !important;
   }
   
   .hero-split-left .hero-btn::before {
       background: #9CFF1E !important;
   }
   
   .hero-split-left .hero-btn:hover {
       border-color: #9CFF1E !important;
       box-shadow: 0 0 30px rgba(156,255,30,0.35) !important;
   }
   
   .hero-video-card {
       width: 100% !important;
       max-width: 620px !important;
       aspect-ratio: 16 / 9 !important;
       border-radius: 14px !important;
       overflow: hidden !important;
       border: 1px solid rgba(255,255,255,0.08) !important;
       box-shadow: 0 0 60px rgba(0,0,0,0.6), 0 0 20px rgba(156,255,30,0.06) !important;
   }
   
   .hero-video-card iframe {
       width: 100% !important;
       height: 100% !important;
       display: block !important;
       border: none !important;
   }
   
   @media (max-width: 960px) {
       .hero-split {
           flex-direction: column !important;
           padding: 40px 24px !important;
           gap: 36px !important;
           min-height: unset !important;
       }
       .hero-split-left {
           text-align: center !important;
       }
       .hero-split-left .hero-sub {
           margin: 0 auto 28px !important;
       }
       .hero-split-left .hero-divider {
           margin: 0 auto 28px !important;
       }
       .hero-split-right {
           width: 100% !important;
       }
   }
   
   /* ==============================================
      HOMEPAGE — RAID CAM
      ============================================== */
   
   .raid-section {
       margin-bottom: 30px !important;
       animation: homePageFadeUp 1.2s ease;
   }
   
   .raid-section .section-tag,
   .home-section .section-tag,
   .section-tag {
       font-size: 0.85rem !important;
       font-weight: 700 !important;
       letter-spacing: 4px !important;
       color: rgba(255,255,255,0.25) !important;
       text-transform: uppercase !important;
       margin-bottom: 14px !important;
       font-family: 'Rajdhani', sans-serif !important;
   }
   
   .raid-section .raid-video {
       position: relative !important;
       border-radius: 12px !important;
       overflow: hidden !important;
       border: 1px solid rgba(126,231,135,0.2) !important;
       background: #000 !important;
       box-shadow: 0 4px 30px rgba(0,0,0,0.4) !important;
       aspect-ratio: 16 / 9;
       width: 100%;
   }
   
   .raid-section .raid-video iframe {
       position: absolute !important;
       top: -10% !important;
       left: -5% !important;
       width: 110% !important;
       height: 120% !important;
       border: none !important;
   }
   
   .raid-section .raid-info {
       display: flex !important;
       justify-content: space-between !important;
       align-items: flex-start !important;
       margin-top: 20px !important;
       gap: 30px !important;
   }
   
   .raid-section .raid-left {
       flex-shrink: 0;
       display: flex;
       flex-direction: column;
   }
   
   .raid-section .raid-tag {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 2.4rem !important;
       font-weight: 900 !important;
       color: #9CFF1E !important;
       letter-spacing: 2px !important;
       line-height: 1 !important;
   }
   
   .raid-section .raid-name {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 1.4rem !important;
       font-weight: 700 !important;
       color: #fff !important;
       letter-spacing: 3px !important;
   }
   
   .raid-section .raid-right {
       text-align: right;
       max-width: 400px;
   }
   
   .raid-section .raid-desc {
       font-size: 0.85rem !important;
       color: rgba(255,255,255,0.4) !important;
       line-height: 1.5 !important;
       margin: 0 0 12px !important;
   }
   
   .raid-section .yt-btn {
       display: inline-flex !important;
       align-items: center !important;
       gap: 10px !important;
       padding: 10px 22px !important;
       background: transparent !important;
       color: #9CFF1E !important;
       border: 1px solid rgba(156,255,30,0.3) !important;
       border-radius: 8px !important;
       font-size: 0.9rem !important;
       font-weight: 700 !important;
       letter-spacing: 1.5px !important;
       text-decoration: none !important;
       transition: all 0.3s ease !important;
       font-family: 'Rajdhani', sans-serif !important;
       text-transform: uppercase !important;
   }
   
   .raid-section .yt-btn:hover {
       border-color: #9CFF1E !important;
       color: #9CFF1E !important;
       background: rgba(156,255,30,0.1) !important;
       box-shadow: 0 0 12px rgba(156,255,30,0.15) !important;
       transform: translateY(-1px);
   }
   
   
   /* ==============================================
      RANK COMPARISON
      ============================================== */

   .rank-compare-section {
       margin-top: 50px !important;
       margin-bottom: 10px !important;
       max-width: 860px !important;
       margin-left: auto !important;
       margin-right: auto !important;
   }

   .rank-compare-table {
       display: flex !important;
       flex-direction: column !important;
       gap: 4px !important;
   }

   .rank-compare-row {
       display: grid !important;
       grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr !important;
       gap: 4px !important;
   }

   .rank-compare-cell {
       padding: 10px 14px !important;
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 0.95rem !important;
       font-weight: 700 !important;
       color: rgba(255,255,255,0.9) !important;
       background: rgba(255,255,255,0.05) !important;
       border: 1px solid rgba(255,255,255,0.12) !important;
       border-radius: 8px !important;
       text-align: center !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
   }

   .rank-compare-header .rank-compare-cell {
       background: transparent !important;
       border: none !important;
       padding-bottom: 4px !important;
   }

   .rank-compare-label {
       text-align: left !important;
       justify-content: flex-start !important;
       font-size: 0.8rem !important;
       font-weight: 600 !important;
       color: rgba(255,255,255,0.35) !important;
       text-transform: uppercase !important;
       letter-spacing: 1px !important;
       background: transparent !important;
       border-color: transparent !important;
   }

   /* Per-column tints */
   .rank-compare-row:not(.rank-compare-header) .mvp-col {
       background: rgba(255,215,0,0.1) !important;
       border-color: rgba(255,215,0,0.25) !important;
   }
   .rank-compare-row:not(.rank-compare-header) .prime-col {
       background: rgba(45,212,191,0.1) !important;
       border-color: rgba(45,212,191,0.25) !important;
   }
   .rank-compare-row:not(.rank-compare-header) .supreme-col {
       background: rgba(255,105,180,0.1) !important;
       border-color: rgba(255,105,180,0.25) !important;
   }
   .rank-compare-row:not(.rank-compare-header) .vanguard-col {
       background: rgba(200,30,30,0.15) !important;
       border-color: rgba(200,30,30,0.4) !important;
       box-shadow: inset 0 0 12px rgba(200,30,30,0.08), 0 0 8px rgba(200,30,30,0.1) !important;
       color: rgba(255,255,255,0.95) !important;
   }

   /* Vanguard header cell — featured "best" column */
   .rank-compare-header .rank-compare-best-col {
       background: rgba(200,30,30,0.12) !important;
       border: 1px solid rgba(200,30,30,0.4) !important;
       border-radius: 8px 8px 0 0 !important;
       box-shadow: 0 0 16px rgba(200,30,30,0.15) !important;
       flex-direction: column !important;
       gap: 4px !important;
       padding-top: 8px !important;
       padding-bottom: 8px !important;
   }

   .rank-compare-best-badge {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 0.6rem !important;
       font-weight: 900 !important;
       letter-spacing: 3px !important;
       color: #cc2020 !important;
       background: rgba(200,30,30,0.18) !important;
       border: 1px solid rgba(200,30,30,0.35) !important;
       border-radius: 4px !important;
       padding: 1px 7px !important;
       text-transform: uppercase !important;
   }

   .rank-compare-rank-name {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 1rem !important;
       font-weight: 900 !important;
       text-transform: uppercase !important;
       letter-spacing: 2px !important;
   }

   .rank-compare-best {
       color: #fff !important;
       font-size: 1.05rem !important;
   }

   .rank-compare-check {
       color: #7ee787 !important;
       font-size: 1rem !important;
   }

   .rank-compare-none {
       color: rgba(255,255,255,0.3) !important;
   }

   @media (max-width: 600px) {
       .rank-compare-section {
           overflow-x: auto !important;
       }
       .rank-compare-table {
           min-width: 480px !important;
       }
   }


   /* ==============================================
      FAQ SECTION
      ============================================== */
   
   .faq-section {
       margin-top: 50px !important;
       margin-bottom: 20px !important;
       max-width: 750px !important;
       margin-left: auto !important;
       margin-right: auto !important;
   }
   
   .faq-header {
       text-align: center !important;
       margin-bottom: 28px !important;
   }
   
   .faq-tag {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 0.7rem !important;
       font-weight: 700 !important;
       letter-spacing: 5px !important;
       color: rgba(255,255,255,0.25) !important;
       text-transform: uppercase !important;
       margin-bottom: 6px !important;
   }
   
   .faq-title {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 2rem !important;
       font-weight: 900 !important;
       color: #fff !important;
       letter-spacing: 4px !important;
       text-transform: uppercase !important;
       margin: 0 !important;
   }
   
   .faq-divider {
       width: 50px !important;
       height: 2px !important;
       background: linear-gradient(90deg, transparent, #9CFF1E, transparent) !important;
       margin: 12px auto 0 !important;
   }
   
   .faq-list {
       display: flex !important;
       flex-direction: column !important;
       gap: 8px !important;
   }
   
   div.faq-list div.faq-item {
       background: rgba(0,0,0,0.25) !important;
       border: 1px solid rgba(255,255,255,0.06) !important;
       border-radius: 12px !important;
       overflow: hidden !important;
       cursor: pointer !important;
       transition: border-color 0.3s ease !important;
       margin: 0 !important;
       padding: 0 !important;
   }
   
   div.faq-list div.faq-item:hover {
       border-color: rgba(156,255,30,0.15) !important;
   }
   
   div.faq-list div.faq-item.open {
       border-color: rgba(156,255,30,0.2) !important;
   }
   
   div.faq-item div.faq-question {
       display: flex !important;
       justify-content: space-between !important;
       align-items: center !important;
       padding: 18px 20px !important;
       gap: 16px !important;
       margin: 0 !important;
   }
   
   div.faq-item div.faq-question span {
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 1.05rem !important;
       font-weight: 700 !important;
       color: rgba(255,255,255,0.85) !important;
       letter-spacing: 1px !important;
       text-transform: uppercase !important;
   }
   
   i.faq-icon {
       font-size: 12px !important;
       color: rgba(255,255,255,0.3) !important;
       transition: transform 0.3s ease, color 0.3s ease !important;
       flex-shrink: 0 !important;
   }
   
   div.faq-item.open i.faq-icon {
       transform: rotate(180deg) !important;
       color: #9CFF1E !important;
   }
   
   div.faq-answer {
       display: none !important;
       padding: 0 20px 20px !important;
   }
   
   div.faq-item.open div.faq-answer {
       display: block !important;
   }
   
   div.faq-answer p {
       font-family: 'Roboto Flex', sans-serif !important;
       font-size: 0.88rem !important;
       color: rgba(255,255,255,0.5) !important;
       line-height: 1.65 !important;
       margin: 0 0 10px !important;
   }
   
   div.faq-answer p:last-child {
       margin-bottom: 0 !important;
   }
   
   div.faq-answer strong {
       color: rgba(255,255,255,0.75) !important;
   }
   
   a.faq-link {
       color: #9CFF1E !important;
       text-decoration: none !important;
       font-weight: 600 !important;
       transition: color 0.25s ease, text-shadow 0.25s ease !important;
   }
   
   a.faq-link:hover {
       text-shadow: 0 0 10px rgba(156,255,30,0.3) !important;
   }
   
   a.faq-link i {
       margin-right: 4px !important;
   }
   
   .faq-separator {
       color: rgba(255,255,255,0.15) !important;
       margin: 0 10px !important;
   }
   
   .faq-provider {
       color: rgba(255,255,255,0.4) !important;
       font-size: 0.85rem !important;
   }
   
   .faq-divider-sm {
       width: 100% !important;
       height: 1px !important;
       background: linear-gradient(90deg, transparent, rgba(255,255,255,0.06), transparent) !important;
       margin: 14px 0 !important;
   }
   
   
   /* ==============================================
      HOMEPAGE — CMS CARD & SECTIONS
      ============================================== */
   
   /* Hide CMS welcome/setup guide content */
   .cms-card,
   .home-section {
       display: none !important;
   }
   
   
   /* ==============================================
      PRODUCT MODAL
      ============================================== */
   
   #product-modal-overlay {
       position: fixed !important;
       top: 0 !important;
       left: 0 !important;
       width: 100% !important;
       height: 100% !important;
       background: rgba(0,0,0,0.75) !important;
       backdrop-filter: blur(6px) !important;
       -webkit-backdrop-filter: blur(6px) !important;
       z-index: 9999 !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       padding: 20px !important;
       overflow-y: auto !important;
       scrollbar-width: none !important;
   }
   
   #product-modal-overlay::-webkit-scrollbar {
       width: 0 !important;
       display: none !important;
   }
   
   #product-modal-overlay.hidden {
       display: none !important;
   }
   
   .product-modal {
       position: relative !important;
       background: linear-gradient(135deg, rgba(28,28,32,0.98), rgba(18,18,20,0.99)) !important;
       border: 1px solid rgba(156,255,30,0.15) !important;
       border-radius: 16px !important;
       box-shadow: 0 20px 60px rgba(0,0,0,0.6), 0 0 40px rgba(156,255,30,0.05) !important;
       width: 100% !important;
       max-width: 1320px !important;
       max-height: 90vh !important;
       overflow-y: auto !important;
       padding: 32px !important;
       animation: modalSlideIn 0.3s ease !important;
       scrollbar-width: thin !important;
       scrollbar-color: rgba(156,255,30,0.2) transparent !important;
   }
   
   .product-modal::-webkit-scrollbar {
       width: 6px !important;
   }
   
   .product-modal::-webkit-scrollbar-track {
       background: transparent !important;
   }
   
   .product-modal::-webkit-scrollbar-thumb {
       background: rgba(156,255,30,0.15) !important;
       border-radius: 10px !important;
   }
   
   .product-modal::-webkit-scrollbar-thumb:hover {
       background: rgba(156,255,30,0.3) !important;
   }
   
   .product-modal-close {
       position: absolute !important;
       top: 14px !important;
       right: 18px !important;
       background: rgba(255,255,255,0.06) !important;
       border: 1px solid rgba(255,255,255,0.1) !important;
       color: rgba(255,255,255,0.6) !important;
       font-size: 24px !important;
       width: 38px !important;
       height: 38px !important;
       border-radius: 10px !important;
       cursor: pointer !important;
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
       transition: all 0.25s ease !important;
       z-index: 10 !important;
       line-height: 1 !important;
       padding: 0 !important;
       font-family: sans-serif !important;
   }
   
   .product-modal-close:hover {
       background: rgba(255,107,107,0.15) !important;
       border-color: rgba(255,107,107,0.3) !important;
       color: #ff6b6b !important;
   }
   
   .product-modal-loading {
       text-align: center !important;
       padding: 60px 20px !important;
       color: rgba(255,255,255,0.5) !important;
       font-family: 'Rajdhani', sans-serif !important;
       font-size: 1.1rem !important;
       letter-spacing: 2px !important;
   }
   
   .product-modal-loading i {
       color: #9CFF1E !important;
       margin-right: 8px !important;
   }
   
   /* Modal inner product page overrides */
   .product-modal .product-page {
       border: none !important;
       box-shadow: none !important;
       background: transparent !important;
   }
   
   .product-modal img.product-img {
       max-height: 15rem !important;
       width: auto !important;
       max-width: 100% !important;
       object-fit: contain !important;
   }
   
   .product-modal .product-page-image {
       display: flex !important;
       align-items: center !important;
       justify-content: center !important;
   }
   
   .product-modal .product-description {
       border: none !important;
       box-shadow: none !important;
       background: rgba(0,0,0,0.2) !important;
       border-radius: 10px !important;
       margin-top: 16px !important;
   }
   
   .product-modal .product-description img,
   .product-description img {
       max-width: 100% !important;
       height: auto !important;
       object-fit: contain !important;
       align-self: flex-start !important;
   }
   
   .product-modal .product-description div[style*="display: flex"],
   .product-description div[style*="display: flex"] {
       align-items: flex-start !important;
   }
   
   
   @keyframes modalSlideIn {
       from { opacity: 0; transform: translateY(20px) scale(0.97); }
       to   { opacity: 1; transform: translateY(0) scale(1); }
   }
   
   
   /* ==============================================
      MOBILE HAMBURGER MENU
      ============================================== */

   /* Hidden by default — shown only on mobile */
   .mobile-menu-btn {
       display: none;
       flex-direction: column;
       justify-content: center;
       align-items: center;
       gap: 5px;
       width: 36px;
       height: 36px;
       min-width: 36px;
       background: rgba(24,24,27,0.5);
       border: 1px solid rgba(126,231,135,0.1);
       border-radius: 8px;
       cursor: pointer;
       padding: 8px;
       margin-left: auto;
       flex-shrink: 0;
   }

   .mobile-menu-btn span {
       display: block;
       width: 18px;
       height: 2px;
       background: rgba(255,255,255,0.85);
       border-radius: 2px;
       transition: transform 0.3s ease, opacity 0.3s ease;
   }

   .mobile-menu-btn.open span:nth-child(1) {
       transform: rotate(45deg) translate(5px, 4px);
   }
   .mobile-menu-btn.open span:nth-child(2) {
       opacity: 0;
       transform: scaleX(0);
   }
   .mobile-menu-btn.open span:nth-child(3) {
       transform: rotate(-45deg) translate(5px, -4px);
   }

   /* Mobile nav dropdown — hidden by default */
   .mobile-nav {
       display: none;
       flex-direction: column;
       background: rgba(8,8,10,0.97);
       border-top: 1px solid rgba(255,255,255,0.06);
       padding: 8px 0 16px;
       width: 100%;
   }

   .mobile-nav.open {
       display: flex;
   }

   .mobile-nav-list {
       list-style: none;
       margin: 0;
       padding: 0 8px;
   }

   .mobile-nav-list .nav-item a {
       padding: 13px 16px !important;
       font-size: 15px !important;
       letter-spacing: 2px !important;
       border-radius: 8px !important;
       white-space: normal !important;
   }

   .mobile-nav-divider {
       height: 1px;
       background: rgba(255,255,255,0.06);
       margin: 8px 16px;
   }

   .mobile-nav-signin {
       padding: 0 16px;
       display: flex;
       flex-direction: column;
       gap: 8px;
   }

   .mobile-signin-btn {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 10px;
       padding: 12px 20px;
       background: rgba(156,255,30,0.1);
       border: 1px solid rgba(156,255,30,0.2);
       border-radius: 8px;
       color: #9CFF1E !important;
       font-family: 'Rajdhani', sans-serif;
       font-size: 15px;
       font-weight: 700;
       text-transform: uppercase;
       letter-spacing: 2px;
       text-decoration: none;
       transition: all 0.2s ease;
   }

   .mobile-signin-btn:hover {
       background: rgba(156,255,30,0.18);
       border-color: rgba(156,255,30,0.4);
   }

   .mobile-signin-link {
       display: flex;
       align-items: center;
       gap: 10px;
       padding: 12px 8px;
       color: rgba(255,255,255,0.7) !important;
       font-family: 'Rajdhani', sans-serif;
       font-size: 14px;
       font-weight: 600;
       text-transform: uppercase;
       letter-spacing: 1.5px;
       text-decoration: none;
       border-radius: 8px;
       transition: all 0.2s ease;
   }

   .mobile-signin-link:hover {
       color: #fff !important;
       background: rgba(255,255,255,0.05);
   }


   /* ==============================================
      RESPONSIVE — TABLET (768px)
      ============================================== */
   
   @media (max-width: 768px) {
   
       /* Header - hide social icons on tablet to save space */
       .social-media {
           display: none !important;
       }
   
       /* Nav */
       ul.topbar-nav {
           gap: 2px !important;
       }
   
       .header-row {
           height: 52px !important;
       }
   
       li.nav-item a {
           font-size: 13px !important;
           padding: 7px 10px !important;
           letter-spacing: 1px !important;
       }
   
       li.nav-item a i {
           font-size: 13px !important;
       }
   
       li.nav-item a .nav-icon {
           display: none !important;
       }
   
       /* Modal */
       #product-modal-overlay {
           padding: 10px !important;
       }
   
       .product-modal {
           padding: 18px 14px !important;
           max-height: 95vh !important;
           max-width: 100% !important;
       }
   
       /* Product description - stack flex rows on mobile */
       .product-description div[style*="display: flex"] {
           flex-wrap: wrap !important;
       }
   
       .product-description div[style*="display: flex"] > img {
           width: 100% !important;
       }
   
       /* Homepage */
       .hero-banner .hero-title {
           font-size: 2.2rem !important;
       }
   
       .hero-btn.hero-btn-lg {
           padding: 14px 36px !important;
           font-size: 0.95rem !important;
       }
   
       .raid-section .raid-video {
           aspect-ratio: 16 / 10;
       }
   
       .raid-section .raid-info {
           flex-direction: column !important;
       }
   
       .raid-section .raid-right {
           text-align: left !important;
           max-width: 100% !important;
       }
   
       /* Category */
       h2.category-title {
           font-size: 2rem !important;
       }
   
       .category-packages {
           gap: 12px !important;
       }

       /* Kit cards overflow fix (also needed at tablet width) */
       .category-package {
           overflow: visible !important;
           min-height: 0 !important;
           height: auto !important;
       }

       .category-package-details {
           height: auto !important;
           flex: 1 1 auto !important;
       }

       .package-bott {
           overflow: visible !important;
       }

       /* Product page */
       .product-page-image {
           border-right: none !important;
           border-bottom: 1px solid rgba(126,231,135,0.06) !important;
       }
   
       .product-name {
           font-size: 28px !important;
           line-height: 28px !important;
       }
   
       .product-price {
           font-size: 24px !important;
       }
   
       .product-info {
           flex-direction: column !important;
           align-items: flex-start !important;
           gap: 8px !important;
       }
   
       #mainActions {
           flex-direction: column !important;
       }
   
       #giftActions {
           flex-direction: column !important;
       }
   
       /* Cart */
       span.cart-page-title {
           font-size: 32px !important;
           line-height: 32px !important;
       }
   
       .cart-table {
           font-size: 14px !important;
       }
   
       td.options {
           display: none !important;
       }
   
       /* Account */
       .flex.justify-between.ml-4.mb-4 {
           margin-left: 0 !important;
       }
   
       /* Footer */
       footer .flex.items-center.justify-between {
           flex-direction: column !important;
           gap: 12px !important;
           text-align: center !important;
       }
   
       .footer-links {
           flex-wrap: wrap !important;
           justify-content: center !important;
           gap: 12px !important;
       }
   }
   
   
   /* ==============================================
      RESPONSIVE — MOBILE (480px)
      ============================================== */
   
   @media (max-width: 480px) {
   
       /* Nav — hidden on mobile, replaced by hamburger */
       .header-nav {
           display: none !important;
       }

       /* Hide desktop sign-in from header row on mobile */
       .header-signin-link {
           display: none !important;
       }

       /* Show hamburger button */
       .mobile-menu-btn {
           display: flex !important;
       }

       /* Logo smaller on mobile */
       .header-logo img {
           max-height: 1.6rem !important;
       }
   
       /* Modal */
       #product-modal-overlay {
           padding: 6px !important;
       }
   
       .product-modal {
           padding: 16px 10px !important;
           border-radius: 12px !important;
       }
   
       .product-modal-close {
           top: 10px !important;
           right: 12px !important;
           width: 32px !important;
           height: 32px !important;
           font-size: 20px !important;
       }
   
       /* Homepage */
       .hero-banner {
           padding: 30px 10px 20px !important;
       }
   
       .hero-banner .hero-title {
           font-size: 1.8rem !important;
       }
   
       .hero-banner .hero-sub {
           font-size: 0.85rem !important;
       }
   
       .hero-btn.hero-btn-lg {
           padding: 12px 28px !important;
           font-size: 0.85rem !important;
           letter-spacing: 2px !important;
       }
   
       .raid-section .raid-tag {
           font-size: 1.3rem !important;
       }
   
       /* Category */
       h2.category-title {
           font-size: 1.6rem !important;
       }

       .category-description {
           font-size: 0.8rem !important;
       }

       /* Kit cards — fix "View Package" button being clipped on mobile */
       .category-package {
           overflow: visible !important;
           min-height: 0 !important;
           height: auto !important;
       }

       /* h-full (100%) resolves to min-height in Chrome, causing overflow;
          reset to auto so the details grow with content */
       .category-package-details {
           height: auto !important;
           flex: 1 1 auto !important;
       }

       .package-bott {
           overflow: visible !important;
           flex-direction: column !important;
           gap: 10px !important;
           align-items: stretch !important;
       }
   
       .category-package-price-list {
           text-align: center !important;
           align-items: center !important;
       }
   
       .category-package-buttons {
           justify-content: center !important;
       }
   
       .category-buy-btn {
           width: 100% !important;
           justify-content: center !important;
       }
   
       /* Rank benefits */
       .rank-benefit-label {
           font-size: 0.65rem !important;
       }
   
       .rank-benefit-value {
           font-size: 0.75rem !important;
       }
   
       /* Product page */
       .product-name {
           font-size: 24px !important;
           line-height: 24px !important;
       }
   
       .product-price {
           font-size: 22px !important;
       }
   
       .product-buttons button.add-btn,
       .product-buttons button#giftButton,
       .product-buttons .add-gift-btn {
           padding: 10px 20px !important;
           font-size: 14px !important;
           width: 100% !important;
       }
   
       /* Cart */
       span.cart-page-title {
           font-size: 26px !important;
           line-height: 26px !important;
       }
   
       .nr-item {
           font-size: 16px !important;
       }
   
       td.price,
       td.quantity {
           display: none !important;
       }
   
       a.cart-checkout-btn {
           padding: 12px 20px !important;
           font-size: 0.85rem !important;
       }
   
       /* Footer */
       .footer-links a {
           font-size: 13px !important;
       }
   
       .footer-copyright span {
           font-size: 13px !important;
       }
   }