:root {
  --vn-bg-obsidian: #060608;
  --vn-bg-surface: #0D0D11;
  --vn-bg-card: #121217;
  --vn-bg-card-hover: #181820;
  --vn-border: #1C1C24;
  --vn-crimson: #DC143C;
  --vn-crimson-hover: #B01030;
  --vn-crimson-glow: rgba(220, 20, 60, 0.25);
  --vn-text-main: #F4F4F6;
  --vn-text-muted: #8E8E9A;
}

body {
  background-color: var(--vn-bg-obsidian) !important;
  color: var(--vn-text-main) !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-x: hidden;
}

header#header { display: none !important; }
#main-body { background-color: var(--vn-bg-obsidian) !important; }

.vn-navbar {
  background-color: rgba(6, 6, 8, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--vn-border);
  padding: 14px 0;
  position: sticky;
  top: 0;
  z-index: 1030;
}

.vn-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 1.2px;
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.vn-brand-icon {
  width: 28px;
  height: 28px;
  background: linear-gradient(135deg, var(--vn-crimson), #7A0920);
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px var(--vn-crimson-glow);
}

.vn-nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.vn-nav-links > li { position: relative; }

.vn-nav-links > li > a {
  color: #D4D4DC !important;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none !important;
  transition: color 0.2s ease;
  padding: 8px 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.vn-nav-links > li > a:hover { color: var(--vn-crimson) !important; }

.vn-dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--vn-bg-surface);
  border: 1px solid var(--vn-border);
  border-radius: 10px;
  padding: 8px;
  box-shadow: 0 16px 36px rgba(0,0,0,0.85);
  z-index: 1050;
}

.vn-nav-links > li:hover .vn-dropdown-menu { display: block; }

.vn-dropdown-menu a {
  display: block;
  padding: 9px 12px;
  color: #D4D4DC !important;
  font-size: 0.86rem;
  border-radius: 6px;
  text-decoration: none !important;
}

.vn-dropdown-menu a:hover {
  background: var(--vn-bg-card-hover);
  color: var(--vn-crimson) !important;
}

.vn-btn-signin {
  color: #E4E4EC !important;
  font-size: 0.9rem;
  font-weight: 500;
  margin-right: 18px;
  text-decoration: none !important;
}

.vn-btn-signin:hover { color: var(--vn-crimson) !important; }

.vn-btn-crimson {
  background-color: var(--vn-crimson) !important;
  color: #FFFFFF !important;
  font-weight: 600;
  font-size: 0.88rem;
  padding: 9px 20px;
  border-radius: 999px;
  border: none;
  text-decoration: none !important;
  box-shadow: 0 0 18px var(--vn-crimson-glow);
  transition: all 0.2s ease;
  display: inline-block;
}

.vn-btn-crimson:hover {
  background-color: var(--vn-crimson-hover) !important;
  transform: translateY(-1px);
}

.vn-value-strip {
  border-bottom: 1px solid var(--vn-border);
  background: linear-gradient(180deg, rgba(220,20,60,0.05) 0%, rgba(6,6,8,0) 100%);
  padding: 26px 0;
}

.vn-value-item h6 {
  color: #FFFFFF;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 5px;
}

.vn-value-item p {
  color: var(--vn-text-muted);
  font-size: 0.78rem;
  line-height: 1.45;
  margin: 0;
}

.vn-eyebrow {
  color: var(--vn-crimson);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}

.vn-heading {
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1.15;
  color: #FFFFFF;
  margin-bottom: 14px;
}

.vn-heading span {
  color: var(--vn-crimson);
  display: block;
}

.vn-subtext {
  color: var(--vn-text-muted);
  font-size: 0.95rem;
  max-width: 540px;
  line-height: 1.6;
}

.vn-showcase-section { padding: 75px 0 50px; }

.vn-game-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
  margin-top: 36px;
}

@media (max-width: 1199px) { .vn-game-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) { .vn-game-grid { grid-template-columns: repeat(2, 1fr); } }

.vn-game-card {
  position: relative;
  height: 240px;
  border-radius: 12px;
  overflow: hidden;
  background-color: var(--vn-bg-card);
  border: 1px solid var(--vn-border);
  text-decoration: none !important;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  transition: all 0.25s ease;
}

.vn-game-card:hover {
  transform: translateY(-5px);
  border-color: var(--vn-crimson);
  box-shadow: 0 12px 28px rgba(220, 20, 60, 0.22);
}

.vn-game-card-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.vn-game-card-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(6,6,8,0.12) 0%, rgba(6,6,8,0.65) 55%, rgba(6,6,8,0.96) 100%);
  z-index: 2;
}

.vn-game-card-content { position: relative; z-index: 3; }

.vn-game-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: #FFFFFF;
  background: var(--vn-crimson);
  padding: 2px 7px;
  border-radius: 4px;
  margin-bottom: 6px;
}

.vn-game-title { color: #FFFFFF; font-weight: 700; font-size: 1rem; margin: 0 0 2px; }
.vn-game-sub { color: var(--vn-text-muted); font-size: 0.75rem; margin: 0; }

.vn-hidden-row { display: none; margin-top: 16px; }
.vn-hidden-row.is-open { display: grid; }
.vn-show-more-wrap { text-align: center; margin-top: 28px; }

.vn-show-more-btn {
  background: var(--vn-bg-surface);
  color: #E4E4EC;
  border: 1px solid var(--vn-border);
  border-radius: 999px;
  padding: 9px 22px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}

.vn-show-more-btn:hover {
  border-color: var(--vn-crimson);
  color: #FFFFFF;
}

.vn-network-section {
  padding: 80px 0 90px;
  border-top: 1px solid var(--vn-border);
  background: radial-gradient(circle at 75% 50%, rgba(220, 20, 60, 0.08) 0%, rgba(6, 6, 8, 0) 55%);
}

.vn-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 36px;
  margin-top: 32px;
  padding-top: 28px;
  border-top: 1px solid var(--vn-border);
  max-width: 420px;
}

.vn-stat-num { font-size: 1.75rem; font-weight: 800; color: #FFFFFF; line-height: 1.1; margin-bottom: 4px; }
.vn-stat-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 1.4px; text-transform: uppercase; color: var(--vn-text-muted); }
.vn-globe-wrap { display: flex; align-items: center; justify-content: center; }
#vn-globe-canvas { width: 100%; max-width: 420px; height: auto; aspect-ratio: 1 / 1; }

footer#footer {
  background-color: #040406 !important;
  border-top: 1px solid var(--vn-border) !important;
  color: var(--vn-text-muted) !important;
  padding: 55px 0 30px !important;
}

.vn-footer-title { color: #FFFFFF; font-size: 0.85rem; font-weight: 700; text-transform: uppercase; margin-bottom: 14px; }
.vn-footer-links { list-style: none; padding: 0; margin: 0; }
.vn-footer-links li { margin-bottom: 8px; }
.vn-footer-links a { color: var(--vn-text-muted) !important; font-size: 0.84rem; text-decoration: none !important; }
.vn-footer-links a:hover { color: var(--vn-crimson) !important; }

/* Hide default WHMCS domain search block on homepage to keep full dark flow */
.home-domain-search, .hero-banner, .domain-checker-bg {
  display: none !important;
}

/* Ensure body and home container stay solid obsidian */
body, #main-body, .home-sections {
  background-color: var(--vn-bg-obsidian) !important;
}

/* =========================================================
   PHASE 3: CLIENT AREA DASHBOARD, TABLES & TICKETS
   ========================================================= */

/* Client Area Home Stats Blocks */
.client-home-panels .panel, .panel-clienthome {
  background-color: var(--vn-bg-card) !important;
  border: 1px solid var(--vn-border) !important;
  border-radius: 12px !important;
}

.client-home-panels .panel-heading {
  background-color: var(--vn-bg-surface) !important;
  color: #FFFFFF !important;
  border-bottom: 1px solid var(--vn-border) !important;
}

/* Tables (Services, Invoices, Tickets) */
table.table, .table-responsive table {
  background-color: var(--vn-bg-card) !important;
  color: var(--vn-text-main) !important;
  border-radius: 10px !important;
  overflow: hidden;
}

table.table th {
  background-color: var(--vn-bg-surface) !important;
  color: #A1A1AA !important;
  border-bottom: 1px solid var(--vn-border) !important;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

table.table td {
  border-top: 1px solid var(--vn-border) !important;
  color: #D4D4DC !important;
  vertical-align: middle !important;
}

/* Status Badges */
.label.active, .badge.active, .label-success {
  background-color: rgba(46, 125, 50, 0.2) !important;
  color: #4caf50 !important;
  border: 1px solid rgba(76, 175, 80, 0.4);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.label.pending, .label-warning {
  background-color: rgba(230, 81, 0, 0.2) !important;
  color: #ff9800 !important;
  border: 1px solid rgba(255, 152, 0, 0.4);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}

.label.cancelled, .label-danger {
  background-color: rgba(220, 20, 60, 0.2) !important;
  color: var(--vn-crimson) !important;
  border: 1px solid var(--vn-border-crimson);
  padding: 4px 10px;
  border-radius: 999px;
  font-weight: 600;
}

/* =========================================================
   MOBILE NAVIGATION & FULL RESPONSIVENESS FIXES
   ========================================================= */

/* Hide default Twenty-One breadcrumb bar ("Portal Home") */
.master-breadcrumb, ol.breadcrumb, .breadcrumb {
  display: none !important;
}

/* Mobile Hamburger Button */
.vn-mobile-btn {
  background: var(--vn-bg-card);
  border: 1px solid var(--vn-border);
  color: #FFFFFF;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
}

.vn-mobile-btn:hover {
  border-color: var(--vn-crimson);
  color: var(--vn-crimson);
}

/* Mobile Slide-Down Drawer */
.vn-mobile-drawer {
  display: none;
  background-color: #09090D;
  border-top: 1px solid var(--vn-border);
  border-bottom: 1px solid var(--vn-border);
}

.vn-mobile-drawer.is-open {
  display: block;
}

.vn-mobile-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--vn-crimson);
  margin-bottom: 6px;
}

.vn-mobile-link {
  display: block;
  padding: 9px 4px;
  color: #E4E4EC !important;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(28, 28, 36, 0.5);
}

.vn-mobile-link:hover {
  color: var(--vn-crimson) !important;
}

/* Mobile & Tablet Scaling */
@media (max-width: 767px) {
  .vn-heading {
    font-size: 1.85rem !important;
  }
  .vn-showcase-section {
    padding: 45px 0 35px !important;
  }
  .vn-network-section {
    padding: 50px 0 60px !important;
  }
  .vn-game-card {
    height: 185px !important;
    padding: 12px !important;
  }
  #vn-globe-canvas {
    max-width: 290px !important;
    margin-top: 10px;
  }
  .vn-stats-grid {
    gap: 20px 24px !important;
  }
  .vn-stat-num {
    font-size: 1.45rem !important;
  }
}

/* =========================================================
   FIX: REPLACE WHITE/LEGACY "PORTAL HOME" PAGE HEADER
   ========================================================= */

/* Completely hide the legacy Portal Home header bar on the landing page */
body[data-page="homepage"] .header-lined,
body[data-page="homepage"] .page-header,
.home-header,
#main-body > .container > .header-lined:first-child {
  display: none !important;
}

/* Style inner-page headers (Client Area, Store, Invoices) in Obsidian & Crimson */
.header-lined, .page-header {
  background-color: var(--vn-bg-surface) !important;
  border: 1px solid var(--vn-border) !important;
  border-radius: 12px !important;
  padding: 18px 22px !important;
  margin-bottom: 24px !important;
}

.header-lined h1, .page-header h1 {
  color: #FFFFFF !important;
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

.header-lined h1 small, .page-header h1 small {
  color: var(--vn-crimson) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  display: block;
  margin-top: 4px;
}

/* Re-enable clean dark breadcrumbs on inner pages (Client Area / Store) */
.header-lined .breadcrumb, .page-header .breadcrumb {
  display: flex !important;
  background: transparent !important;
  padding: 6px 0 0 0 !important;
  margin: 0 !important;
  font-size: 0.8rem !important;
}

.header-lined .breadcrumb li, .header-lined .breadcrumb li a {
  color: var(--vn-text-muted) !important;
}

.header-lined .breadcrumb li.active {
  color: var(--vn-crimson) !important;
  font-weight: 600;
}

/* =========================================================
   LANDING PAGE EXPANSION: PANEL SHOWCASE, FEATURES, FAQ, CTA
   ========================================================= */

.vn-section {
  padding: 75px 0;
  border-top: 1px solid var(--vn-border);
}

/* --- INTERACTIVE PANEL SHOWCASE --- */
.vn-panel-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vn-panel-tab {
  background-color: var(--vn-bg-card);
  border: 1px solid var(--vn-border);
  border-radius: 12px;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.vn-panel-tab:hover {
  border-color: rgba(220, 20, 60, 0.45);
  background-color: var(--vn-bg-card-hover);
}

.vn-panel-tab.active {
  background: linear-gradient(90deg, rgba(220, 20, 60, 0.14) 0%, var(--vn-bg-card) 100%);
  border-color: var(--vn-crimson);
  box-shadow: 0 8px 24px rgba(220, 20, 60, 0.16);
}

.vn-panel-tab h5 {
  color: #FFFFFF;
  font-size: 0.98rem;
  font-weight: 700;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vn-panel-tab p {
  color: var(--vn-text-muted);
  font-size: 0.82rem;
  margin: 0;
  line-height: 1.45;
}

/* Simulated Panel Window */
.vn-panel-window {
  background-color: #0A0A0E;
  border: 1px solid #242430;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 30px rgba(220, 20, 60, 0.1);
}

.vn-panel-topbar {
  background-color: #111117;
  border-bottom: 1px solid var(--vn-border);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vn-window-dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.vn-panel-body {
  padding: 22px;
  min-height: 310px;
}

.vn-panel-pane {
  display: none;
}

.vn-panel-pane.active {
  display: block;
}

.vn-terminal-box {
  background-color: #050507;
  border: 1px solid #1C1C26;
  border-radius: 10px;
  padding: 16px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.78rem;
  line-height: 1.65;
  color: #D4D4DC;
}

.vn-metric-pill {
  background-color: #121218;
  border: 1px solid var(--vn-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.8rem;
}

/* --- FEATURES GRID --- */
.vn-feature-card {
  background-color: var(--vn-bg-card);
  border: 1px solid var(--vn-border);
  border-radius: 14px;
  padding: 26px;
  height: 100%;
  transition: all 0.25s ease;
}

.vn-feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--vn-crimson);
  box-shadow: 0 12px 30px rgba(220, 20, 60, 0.16);
}

.vn-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(220, 20, 60, 0.12);
  border: 1px solid rgba(220, 20, 60, 0.35);
  color: var(--vn-crimson);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 16px;
}

.vn-feature-card h5 {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.vn-feature-card p {
  color: var(--vn-text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
}

/* --- FAQ ACCORDION --- */
.vn-faq-item {
  background-color: var(--vn-bg-card);
  border: 1px solid var(--vn-border);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.vn-faq-q {
  width: 100%;
  background: transparent;
  border: none;
  padding: 18px 22px;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.vn-faq-q:hover {
  color: var(--vn-crimson);
}

.vn-faq-a {
  display: none;
  padding: 0 22px 18px;
  color: var(--vn-text-muted);
  font-size: 0.88rem;
  line-height: 1.65;
  border-top: 1px solid rgba(28, 28, 36, 0.6);
  padding-top: 14px;
}

.vn-faq-item.open .vn-faq-a {
  display: block;
}

.vn-faq-item.open .vn-faq-q i {
  transform: rotate(180deg);
  color: var(--vn-crimson);
}

/* --- BOTTOM CTA BANNER --- */
.vn-cta-banner {
  background: radial-gradient(circle at top right, rgba(220, 20, 60, 0.22), rgba(13, 13, 17, 0.98) 60%);
  border: 1px solid rgba(220, 20, 60, 0.4);
  border-radius: 18px;
  padding: 46px 36px;
  text-align: center;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75);
}

/* =========================================================
   LANDING PAGE EXPANSION: PANEL SHOWCASE, FEATURES, FAQ, CTA
   ========================================================= */

.vn-section {
  padding: 75px 0;
  border-top: 1px solid var(--vn-border);
}

/* --- INTERACTIVE PANEL SHOWCASE --- */
.vn-panel-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.vn-panel-tab {
  background-color: var(--vn-bg-card);
  border: 1px solid var(--vn-border);
  border-radius: 12px;
  padding: 16px 20px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.vn-panel-tab:hover {
  border-color: rgba(220, 20, 60, 0.45);
  background-color: var(--vn-bg-card-hover);
}

.vn-panel-tab.active {
  background: linear-gradient(90deg, rgba(220, 20, 60, 0.14) 0%, var(--vn-bg-card) 100%);
  border-color: var(--vn-crimson);
  box-shadow: 0 8px 24px rgba(220, 20, 60, 0.16);
}

.vn-panel-tab h5 {
  color: #FFFFFF;
  font-size: 0.98rem;
  font-weight: 700;
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.vn-panel-tab p {
  color: var(--vn-text-muted);
  font-size: 0.82rem;
  margin: 0;
  line-height: 1.45;
}

/* Simulated Panel Window */
.vn-panel-window {
  background-color: #0A0A0E;
  border: 1px solid #242430;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 30px rgba(220, 20, 60, 0.1);
}

.vn-panel-topbar {
  background-color: #111117;
  border-bottom: 1px solid var(--vn-border);
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.vn-window-dots span {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
}

.vn-panel-body {
  padding: 22px;
  min-height: 310px;
}

.vn-panel-pane {
  display: none;
}

.vn-panel-pane.active {
  display: block;
}

.vn-terminal-box {
  background-color: #050507;
  border: 1px solid #1C1C26;
  border-radius: 10px;
  padding: 16px;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
  font-size: 0.78rem;
  line-height: 1.65;
  color: #D4D4DC;
}

.vn-metric-pill {
  background-color: #121218;
  border: 1px solid var(--vn-border);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.8rem;
}

/* --- FEATURES GRID --- */
.vn-feature-card {
  background-color: var(--vn-bg-card);
  border: 1px solid var(--vn-border);
  border-radius: 14px;
  padding: 26px;
  height: 100%;
  transition: all 0.25s ease;
}

.vn-feature-card:hover {
  transform: translateY(-4px);
  border-color: var(--vn-crimson);
  box-shadow: 0 12px 30px rgba(220, 20, 60, 0.16);
}

.vn-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: rgba(220, 20, 60, 0.12);
  border: 1px solid rgba(220, 20, 60, 0.35);
  color: var(--vn-crimson);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  margin-bottom: 16px;
}

.vn-feature-card h5 {
  color: #FFFFFF;
  font-weight: 700;
  font-size: 1.02rem;
  margin-bottom: 8px;
}

.vn-feature-card p {
  color: var(--vn-text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
  margin: 0;
}

/* --- FAQ ACCORDION --- */
.vn-faq-item {
  background-color: var(--vn-bg-card);
  border: 1px solid var(--vn-border);
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.vn-faq-q {
  width: 100%;
  background: transparent;
  border: none;
  padding: 18px 22px;
  color: #FFFFFF;
  font-weight: 600;
  font-size: 0.95rem;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
}

.vn-faq-q:hover {
  color: var(--vn-crimson);
}

.vn-faq-a {
  display: none;
  padding: 0 22px 18px;
  color: var(--vn-text-muted);
  font-size: 0.88rem;
  line-height: 1.65;
  border-top: 1px solid rgba(28, 28, 36, 0.6);
  padding-top: 14px;
}

.vn-faq-item.open .vn-faq-a {
  display: block;
}

.vn-faq-item.open .vn-faq-q i {
  transform: rotate(180deg);
  color: var(--vn-crimson);
}

/* --- BOTTOM CTA BANNER --- */
.vn-cta-banner {
  background: radial-gradient(circle at top right, rgba(220, 20, 60, 0.22), rgba(13, 13, 17, 0.98) 60%);
  border: 1px solid rgba(220, 20, 60, 0.4);
  border-radius: 18px;
  padding: 46px 36px;
  text-align: center;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.75);
}

/* =========================================================
   MOBILE NAVIGATION & FULL RESPONSIVENESS FIXES
   ========================================================= */

/* Hide default Twenty-One breadcrumb bar ("Portal Home") */
.master-breadcrumb, ol.breadcrumb, .breadcrumb {
  display: none !important;
}

/* Mobile Hamburger Button */
.vn-mobile-btn {
  background: var(--vn-bg-card);
  border: 1px solid var(--vn-border);
  color: #FFFFFF;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  cursor: pointer;
}

.vn-mobile-btn:hover {
  border-color: var(--vn-crimson);
  color: var(--vn-crimson);
}

/* Mobile Slide-Down Drawer */
.vn-mobile-drawer {
  display: none;
  background-color: #09090D;
  border-top: 1px solid var(--vn-border);
  border-bottom: 1px solid var(--vn-border);
}

.vn-mobile-drawer.is-open {
  display: block;
}

.vn-mobile-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: var(--vn-crimson);
  margin-bottom: 6px;
}

.vn-mobile-link {
  display: block;
  padding: 9px 4px;
  color: #E4E4EC !important;
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(28, 28, 36, 0.5);
}

.vn-mobile-link:hover {
  color: var(--vn-crimson) !important;
}

/* Mobile & Tablet Scaling */
@media (max-width: 767px) {
  .vn-heading {
    font-size: 1.85rem !important;
  }
  .vn-showcase-section {
    padding: 45px 0 35px !important;
  }
  .vn-network-section {
    padding: 50px 0 60px !important;
  }
  .vn-game-card {
    height: 185px !important;
    padding: 12px !important;
  }
  #vn-globe-canvas {
    max-width: 290px !important;
    margin-top: 10px;
  }
  .vn-stats-grid {
    gap: 20px 24px !important;
  }
  .vn-stat-num {
    font-size: 1.45rem !important;
  }
}

/* =====================================================
   VAMPIRE NODES - NEW HOMEPAGE DESIGN
   ===================================================== */

.vn-hero,
.vn-section {
  position: relative;
  overflow: hidden;
}

.vn-hero {
  background:
    radial-gradient(ellipse at 85% 30%, rgba(150,15,48,.20), transparent 45%),
    linear-gradient(120deg,#08080c,#10080d 75%,#180912);
  padding: 105px 0 95px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.vn-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 65px;
}

.vn-kicker {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #ed6685;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3px;
  margin-bottom: 27px;
}

.vn-kicker > span {
  width: 40px;
  height: 3px;
  background: #dc143c;
  display: inline-block;
}

.vn-hero h1 {
  color: #fff;
  font-size: clamp(42px,5.5vw,76px);
  font-weight: 850;
  line-height: 1.06;
  letter-spacing: -3px;
  margin: 0 0 27px;
}

.vn-hero h1 span,
.vn-section-heading h2 span,
.vn-panel-copy h2 span,
.vn-network-copy h2 span,
.vn-discord-copy h2 span {
  color: #e72b55;
}

.vn-hero-description {
  color: #a7a7b5;
  font-size: 18px;
  line-height: 1.9;
  max-width: 590px;
  margin-bottom: 34px;
}

.vn-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.vn-primary-btn,
.vn-secondary-btn,
.vn-discord-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 17px 25px;
  border-radius: 12px;
  font-weight: 750;
  text-decoration: none !important;
  transition: .25s ease;
}

.vn-primary-btn {
  color: #fff !important;
  background: linear-gradient(110deg,#ed1748,#a90c35);
  box-shadow: 0 10px 30px rgba(220,20,60,.18);
}

.vn-primary-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 35px rgba(220,20,60,.3);
}

.vn-secondary-btn {
  color: #fff !important;
  border: 1px solid #38323a;
  background: rgba(255,255,255,.035);
}

.vn-secondary-btn:hover {
  border-color: #dc143c;
  color: #fff !important;
}

.vn-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 17px 25px;
  margin-top: 45px;
}

.vn-hero-points span {
  color: #aaaab8;
  font-size: 14px;
}

.vn-hero-points i {
  color: #e63860;
  margin-right: 8px;
}

.vn-hero-visual {
  position: relative;
  min-height: 430px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 65% 35%,rgba(220,20,60,.27),transparent 45%),
    linear-gradient(145deg,#14121b,#0a090e);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vn-orbit {
  position: absolute;
  border: 1px solid rgba(220,20,60,.25);
  border-radius: 50%;
}

.vn-orbit-one {
  width: 65%;
  aspect-ratio: 1;
}

.vn-orbit-two {
  width: 85%;
  aspect-ratio: 1;
}

.vn-hero-core {
  width: 155px;
  height: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg,#ed2453,#8c092e);
  color: white;
  border-radius: 32px;
  font-size: 65px;
  box-shadow: 0 20px 70px rgba(220,20,60,.25);
  z-index: 2;
}

.vn-floating-label {
  position: absolute;
  z-index: 3;
  padding: 16px 19px;
  background: #11111a;
  border: 1px solid #35313d;
  border-radius: 14px;
  color: white;
  font-size: 14px;
}

.vn-floating-label i {
  margin-right: 8px;
}

.vn-label-top {
  top: 17%;
  left: 7%;
}

.vn-label-right {
  right: 5%;
  top: 57%;
}

.vn-label-bottom {
  bottom: 10%;
  left: 9%;
}

.vn-green-dot,
.vn-panel-online i,
.vn-running i {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: #26c98b;
  border-radius: 50%;
  margin-right: 7px;
}

/* SECTION BASE */

.vn-section {
  padding: 100px 0;
  background: #09090e;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.vn-section-heading {
  max-width: 680px;
  margin-bottom: 48px;
}

.vn-section-heading h2,
.vn-panel-copy h2,
.vn-network-copy h2 {
  color: #fff;
  font-size: clamp(32px,4vw,51px);
  font-weight: 850;
  line-height: 1.16;
  letter-spacing: -1.7px;
  margin-bottom: 18px;
}

.vn-section-heading p,
.vn-panel-copy > p,
.vn-network-copy > p {
  color: #9b9ba9;
  font-size: 16px;
  line-height: 1.85;
}

/* SERVICE CARDS */

.vn-services-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 22px;
}

.vn-service-card {
  min-height: 365px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  overflow: hidden;
  border-radius: 19px;
  border: 1px solid rgba(255,255,255,.11);
  background: #11111a;
  text-decoration: none !important;
  transition: .3s ease;
}

.vn-service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(220,20,60,.65);
  box-shadow: 0 20px 45px rgba(0,0,0,.3);
}

.vn-service-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.vn-service-card:hover > img {
  transform: scale(1.06);
}

.vn-service-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,#08080d 0%,rgba(8,8,13,.88) 30%,rgba(8,8,13,.08) 100%);
}

.vn-service-content {
  position: relative;
  z-index: 2;
  max-width: 500px;
}

.vn-service-content > span {
  display: block;
  color: #f27691;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.vn-service-content h3 {
  color: white;
  font-size: 27px;
  font-weight: 800;
  margin-bottom: 12px;
}

.vn-service-content p {
  color: #c2c1cc;
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
}

.vn-service-open {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,8,15,.78);
  border: 1px solid rgba(255,255,255,.2);
  color: white;
}

.vn-service-game {
  min-height: 400px;
}

.vn-service-discord {
  background:
    radial-gradient(circle at 75% 20%,rgba(89,100,242,.35),transparent 45%),
    linear-gradient(145deg,#171629,#0c0c15);
}

.vn-service-symbol {
  position: absolute;
  top: 35px;
  right: 55px;
  color: rgba(130,137,255,.28);
  font-size: 115px;
}

.vn-service-infra,
.vn-service-web {
  background:
    radial-gradient(circle at 85% 20%,rgba(220,20,60,.20),transparent 45%),
    linear-gradient(145deg,#15121b,#0c0c12);
}

.vn-infra-art {
  position: absolute;
  inset: 0 0 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle,rgba(220,20,60,.12),transparent 55%);
}

.vn-infra-cube {
  width: 115px;
  height: 115px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 48px;
  background: linear-gradient(145deg,#d91d49,#700b29);
  box-shadow: 0 15px 55px rgba(220,20,60,.18);
}

.vn-infra-line {
  position: absolute;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(220,20,60,.18);
  border-radius: 50%;
}

.vn-infra-art-two .vn-infra-cube {
  background: linear-gradient(145deg,#313746,#141721);
}

.vn-infra-art-three .vn-infra-cube {
  background: linear-gradient(145deg,#4c3340,#17111b);
}

.vn-infra-art-four .vn-infra-cube {
  background: linear-gradient(145deg,#263d54,#111927);
}

/* PANEL */

.vn-panel-section {
  background:
    radial-gradient(ellipse at 85% 40%,rgba(220,20,60,.10),transparent 45%),
    #0c0b11;
}

.vn-panel-layout {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: 55px;
}

.vn-panel-benefits {
  display: grid;
  gap: 17px;
  margin: 30px 0;
}

.vn-panel-benefits div {
  color: #c4c3ce;
  font-size: 15px;
}

.vn-panel-benefits i {
  color: #e63a60;
  width: 27px;
}

.vn-minecraft-panel {
  overflow: hidden;
  border: 1px solid #30303c;
  border-radius: 19px;
  background: #0a0b11;
  box-shadow: 0 25px 70px rgba(0,0,0,.45);
}

.vn-panel-browser {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 20px;
  border-bottom: 1px solid #282832;
  background: #11121a;
}

.vn-browser-dots {
  display: flex;
  gap: 6px;
}

.vn-browser-dots span {
  width: 10px;
  height: 10px;
  background: #dc244b;
  border-radius: 50%;
}

.vn-browser-dots span:nth-child(2) { background: #eab308; }
.vn-browser-dots span:nth-child(3) { background: #22c55e; }

.vn-browser-address {
  flex: 1;
  color: #858595;
  background: #090a10;
  border-radius: 20px;
  padding: 7px 13px;
  font-size: 12px;
  text-align: center;
}

.vn-panel-online {
  color: #26c98b;
  font-size: 11px;
  white-space: nowrap;
}

.vn-panel-content {
  padding: 25px;
}

.vn-panel-server-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
  gap: 12px;
}

.vn-panel-small {
  color: #ed6685;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 800;
}

.vn-panel-server-head h3 {
  color: white;
  font-size: 23px;
  font-weight: 800;
  margin: 7px 0;
}

.vn-panel-server-head p {
  color: #858595;
  margin: 0;
  font-size: 12px;
}

.vn-running {
  color: #26c98b;
  background: rgba(38,201,139,.08);
  border: 1px solid rgba(38,201,139,.2);
  border-radius: 30px;
  padding: 8px 12px;
  font-size: 12px;
}

.vn-resource-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.vn-resource {
  background: #121520;
  border: 1px solid #262b3b;
  border-radius: 12px;
  padding: 14px;
}

.vn-resource > span {
  display: block;
  color: #9298aa;
  font-size: 12px;
  margin-bottom: 10px;
}

.vn-resource strong {
  color: white;
  font-size: 17px;
  display: block;
  margin-bottom: 13px;
}

.vn-progress {
  height: 6px;
  background: #252b38;
  border-radius: 20px;
  overflow: hidden;
}

.vn-progress i {
  display: block;
  height: 100%;
  border-radius: 20px;
  background: #d91d49;
}

.vn-progress-blue i { background: #36a6e9; }
.vn-progress-purple i { background: #9a65e8; }

.vn-console {
  background: #05060a;
  border: 1px solid #252630;
  border-radius: 12px;
  padding: 18px;
  color: #a5a6b6;
  font-family: monospace;
  font-size: 12px;
  line-height: 2;
  overflow: hidden;
}

.vn-console > div span {
  color: #25c993;
}

.vn-console > div .vn-console-warning {
  color: #eab308;
}

.vn-console-cursor {
  color: white !important;
}

.vn-panel-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.vn-panel-actions button {
  border: 1px solid #30303b;
  background: #171923;
  color: #fff;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 12px;
}

.vn-panel-actions button:first-child {
  background: #087f60;
  border-color: #087f60;
}

.vn-panel-actions button:nth-child(2) {
  background: #a91636;
  border-color: #a91636;
}

.vn-panel-disclaimer {
  color: #727383;
  font-size: 10px;
  text-align: right;
  margin-top: 15px;
}

/* STANDARD GRID */

.vn-standard-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}

.vn-standard-card {
  padding: 27px;
  border-radius: 15px;
  border: 1px solid #272631;
  background: #101016;
  transition: .25s ease;
}

.vn-standard-card:hover {
  border-color: rgba(220,20,60,.55);
  transform: translateY(-4px);
}

.vn-standard-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(220,20,60,.12);
  color: #ec4165;
  font-size: 19px;
  margin-bottom: 20px;
}

.vn-standard-card h3 {
  color: white;
  font-size: 17px;
  font-weight: 750;
}

.vn-standard-card p {
  color: #9999a8;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

/* COMPARISON */

.vn-compare-section {
  background: #0c0b11;
}

.vn-compare-table {
  border: 1px solid #292832;
  border-radius: 15px;
  overflow: hidden;
}

.vn-compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 21px 25px;
  border-bottom: 1px solid #292832;
  color: #b7b6c2;
  font-size: 14px;
}

.vn-compare-row:last-child {
  border-bottom: 0;
}

.vn-compare-row strong {
  color: #f1eff5;
  font-weight: 650;
}

.vn-compare-row strong i {
  color: #e63b61;
  margin-right: 8px;
}

.vn-compare-head {
  background: #14121a;
  color: #e66b88;
  font-weight: 800;
  letter-spacing: 1.5px;
  font-size: 11px;
}

/* NETWORK */

.vn-network-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 35px;
  padding: 55px;
  background:
    radial-gradient(circle at 85% 50%,rgba(220,20,60,.17),transparent 45%),
    #111018;
  border: 1px solid #302832;
  border-radius: 20px;
}

.vn-network-graphic {
  position: relative;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vn-network-ring {
  position: absolute;
  border: 1px solid rgba(220,20,60,.23);
  border-radius: 50%;
}

.vn-ring-one { width: 220px; height: 220px; }
.vn-ring-two { width: 310px; height: 310px; }

.vn-network-center {
  width: 100px;
  height: 100px;
  background: linear-gradient(145deg,#e92351,#870d30);
  color: white;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  z-index: 2;
}

.vn-network-node {
  position: absolute;
  width: 47px;
  height: 47px;
  border-radius: 14px;
  background: #191720;
  border: 1px solid #40303a;
  color: #ef5b7a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.vn-node-one { top: 25px; left: 28%; }
.vn-node-two { right: 16%; top: 45%; }
.vn-node-three { bottom: 15px; left: 28%; }

/* FAQ */

.vn-faq-list {
  max-width: 850px;
  margin: auto;
}

.vn-faq-item {
  border: 1px solid #2b2934;
  background: #101016;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.vn-faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 21px 23px;
  color: #fff;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.vn-faq-question i {
  color: #e34b6d;
  transition: transform .2s;
}

.vn-faq-item.open .vn-faq-question i {
  transform: rotate(45deg);
}

.vn-faq-answer {
  display: none;
  padding: 0 23px 21px;
  color: #a5a4b1;
  font-size: 14px;
  line-height: 1.8;
}

.vn-faq-item.open .vn-faq-answer {
  display: block;
}

/* DISCORD */

.vn-discord-section {
  padding-top: 35px;
}

.vn-discord-banner {
  display: flex;
  align-items: center;
  gap: 27px;
  padding: 42px;
  border: 1px solid rgba(220,20,60,.3);
  border-radius: 19px;
  background:
    radial-gradient(circle at 15% 50%,rgba(220,20,60,.18),transparent 45%),
    #121019;
}

.vn-discord-icon {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: rgba(88,101,242,.17);
  color: #8290ff;
  font-size: 35px;
}

.vn-discord-copy {
  flex: 1;
}

.vn-discord-copy > span {
  color: #ed6685;
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 11px;
}

.vn-discord-copy h2 {
  color: white;
  font-size: 28px;
  font-weight: 800;
  margin: 8px 0;
}

.vn-discord-copy p {
  color: #a3a2b0;
  font-size: 14px;
  margin: 0;
}

.vn-discord-button {
  flex-shrink: 0;
  background: #5865f2;
  color: white !important;
}

/* RESPONSIVE */

@media(max-width:991px) {
  .vn-hero-inner,
  .vn-panel-layout,
  .vn-network-card {
    grid-template-columns: 1fr;
  }

  .vn-hero-inner {
    gap: 45px;
  }

  .vn-hero-visual {
    min-height: 350px;
  }

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

@media(max-width:767px) {
  .vn-hero {
    padding: 55px 0 55px;
  }

  .vn-hero-inner {
    gap: 35px;
  }

  .vn-hero h1 {
    font-size: 43px;
    letter-spacing: -1.8px;
  }

  .vn-hero-description {
    font-size: 16px;
  }

  .vn-hero-points {
    gap: 15px;
    flex-direction: column;
    margin-top: 30px;
  }

  .vn-hero-visual {
    min-height: 340px;
  }

  .vn-hero-core {
    width: 115px;
    height: 115px;
    font-size: 48px;
  }

  .vn-floating-label {
    padding: 11px 13px;
    font-size: 12px;
  }

  .vn-section {
    padding: 65px 0;
  }

  .vn-section-heading h2,
  .vn-panel-copy h2,
  .vn-network-copy h2 {
    font-size: 35px;
  }

  .vn-services-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .vn-service-card,
  .vn-service-game {
    min-height: 350px;
    padding: 23px;
  }

  .vn-service-content h3 {
    font-size: 23px;
  }

  .vn-standard-grid {
    grid-template-columns: 1fr;
  }

  .vn-resource-grid {
    gap: 7px;
  }

  .vn-resource {
    padding: 10px 8px;
  }

  .vn-resource strong {
    font-size: 13px;
  }

  .vn-panel-content {
    padding: 15px;
  }

  .vn-browser-address {
    font-size: 9px;
  }

  .vn-panel-actions button {
    padding: 9px 10px;
    font-size: 11px;
  }

  .vn-network-card {
    padding: 25px 20px;
  }

  .vn-network-graphic {
    height: 270px;
  }

  .vn-ring-one { width: 170px; height: 170px; }
  .vn-ring-two { width: 245px; height: 245px; }

  .vn-compare-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 17px;
  }

  .vn-discord-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 22px;
  }

  .vn-discord-button {
    width: 100%;
  }
}

@media(prefers-reduced-motion:reduce) {
  .vn-service-card,
  .vn-primary-btn,
  .vn-standard-card {
    transition: none !important;
  }
}


/* CUSTOM FOOTER */

.vn-custom-footer {
  background: #07070b;
  border-top: 1px solid #28232d;
  padding: 75px 0 25px;
}

.vn-footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 35px;
  padding-bottom: 55px;
}

.vn-footer-logo {
  color: white !important;
  font-size: 23px;
  font-weight: 900;
  letter-spacing: 1px;
  text-decoration: none !important;
}

.vn-footer-logo span {
  color: #dc143c;
}

.vn-footer-brand p {
  color: #92919f;
  font-size: 14px;
  line-height: 1.8;
  max-width: 310px;
  margin: 20px 0;
}

.vn-footer-discord {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  padding: 11px 17px;
  border-radius: 9px;
  background: rgba(88,101,242,.13);
  border: 1px solid rgba(88,101,242,.3);
  color: #aab3ff !important;
  text-decoration: none !important;
}

.vn-footer-column {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.vn-footer-column h4 {
  color: white;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 9px;
}

.vn-footer-column a {
  color: #92919f !important;
  font-size: 13px;
  text-decoration: none !important;
  transition: color .2s;
}

.vn-footer-column a:hover {
  color: #ed4166 !important;
}

.vn-footer-bottom {
  border-top: 1px solid #27232d;
  padding-top: 23px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: #777684;
  font-size: 12px;
}

.vn-trustpilot-link {
  color: #d8d5df !important;
}

@media(max-width:767px) {
  .vn-footer-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 35px 20px;
  }

  .vn-footer-brand {
    grid-column: 1 / -1;
  }

  .vn-footer-bottom {
    flex-direction: column;
  }
}


/* =====================================================
   VAMPIRE NODES - NEW HOMEPAGE DESIGN
   ===================================================== */

.vn-hero,
.vn-section {
  position: relative;
  overflow: hidden;
}

.vn-hero {
  background:
    radial-gradient(ellipse at 85% 30%, rgba(150,15,48,.20), transparent 45%),
    linear-gradient(120deg,#08080c,#10080d 75%,#180912);
  padding: 105px 0 95px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.vn-hero-inner {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  align-items: center;
  gap: 65px;
}

.vn-kicker {
  display: flex;
  align-items: center;
  gap: 13px;
  color: #ed6685;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 3px;
  margin-bottom: 27px;
}

.vn-kicker > span {
  width: 40px;
  height: 3px;
  background: #dc143c;
  display: inline-block;
}

.vn-hero h1 {
  color: #fff;
  font-size: clamp(42px,5.5vw,76px);
  font-weight: 850;
  line-height: 1.06;
  letter-spacing: -3px;
  margin: 0 0 27px;
}

.vn-hero h1 span,
.vn-section-heading h2 span,
.vn-panel-copy h2 span,
.vn-network-copy h2 span,
.vn-discord-copy h2 span {
  color: #e72b55;
}

.vn-hero-description {
  color: #a7a7b5;
  font-size: 18px;
  line-height: 1.9;
  max-width: 590px;
  margin-bottom: 34px;
}

.vn-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.vn-primary-btn,
.vn-secondary-btn,
.vn-discord-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 17px 25px;
  border-radius: 12px;
  font-weight: 750;
  text-decoration: none !important;
  transition: .25s ease;
}

.vn-primary-btn {
  color: #fff !important;
  background: linear-gradient(110deg,#ed1748,#a90c35);
  box-shadow: 0 10px 30px rgba(220,20,60,.18);
}

.vn-primary-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 35px rgba(220,20,60,.3);
}

.vn-secondary-btn {
  color: #fff !important;
  border: 1px solid #38323a;
  background: rgba(255,255,255,.035);
}

.vn-secondary-btn:hover {
  border-color: #dc143c;
  color: #fff !important;
}

.vn-hero-points {
  display: flex;
  flex-wrap: wrap;
  gap: 17px 25px;
  margin-top: 45px;
}

.vn-hero-points span {
  color: #aaaab8;
  font-size: 14px;
}

.vn-hero-points i {
  color: #e63860;
  margin-right: 8px;
}

.vn-hero-visual {
  position: relative;
  min-height: 430px;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at 65% 35%,rgba(220,20,60,.27),transparent 45%),
    linear-gradient(145deg,#14121b,#0a090e);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.vn-orbit {
  position: absolute;
  border: 1px solid rgba(220,20,60,.25);
  border-radius: 50%;
}

.vn-orbit-one {
  width: 65%;
  aspect-ratio: 1;
}

.vn-orbit-two {
  width: 85%;
  aspect-ratio: 1;
}

.vn-hero-core {
  width: 155px;
  height: 155px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(145deg,#ed2453,#8c092e);
  color: white;
  border-radius: 32px;
  font-size: 65px;
  box-shadow: 0 20px 70px rgba(220,20,60,.25);
  z-index: 2;
}

.vn-floating-label {
  position: absolute;
  z-index: 3;
  padding: 16px 19px;
  background: #11111a;
  border: 1px solid #35313d;
  border-radius: 14px;
  color: white;
  font-size: 14px;
}

.vn-floating-label i {
  margin-right: 8px;
}

.vn-label-top {
  top: 17%;
  left: 7%;
}

.vn-label-right {
  right: 5%;
  top: 57%;
}

.vn-label-bottom {
  bottom: 10%;
  left: 9%;
}

.vn-green-dot,
.vn-panel-online i,
.vn-running i {
  display: inline-block;
  width: 9px;
  height: 9px;
  background: #26c98b;
  border-radius: 50%;
  margin-right: 7px;
}

/* SECTION BASE */

.vn-section {
  padding: 100px 0;
  background: #09090e;
  border-bottom: 1px solid rgba(255,255,255,.055);
}

.vn-section-heading {
  max-width: 680px;
  margin-bottom: 48px;
}

.vn-section-heading h2,
.vn-panel-copy h2,
.vn-network-copy h2 {
  color: #fff;
  font-size: clamp(32px,4vw,51px);
  font-weight: 850;
  line-height: 1.16;
  letter-spacing: -1.7px;
  margin-bottom: 18px;
}

.vn-section-heading p,
.vn-panel-copy > p,
.vn-network-copy > p {
  color: #9b9ba9;
  font-size: 16px;
  line-height: 1.85;
}

/* SERVICE CARDS */

.vn-services-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 22px;
}

.vn-service-card {
  min-height: 365px;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 30px;
  overflow: hidden;
  border-radius: 19px;
  border: 1px solid rgba(255,255,255,.11);
  background: #11111a;
  text-decoration: none !important;
  transition: .3s ease;
}

.vn-service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(220,20,60,.65);
  box-shadow: 0 20px 45px rgba(0,0,0,.3);
}

.vn-service-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}

.vn-service-card:hover > img {
  transform: scale(1.06);
}

.vn-service-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg,#08080d 0%,rgba(8,8,13,.88) 30%,rgba(8,8,13,.08) 100%);
}

.vn-service-content {
  position: relative;
  z-index: 2;
  max-width: 500px;
}

.vn-service-content > span {
  display: block;
  color: #f27691;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 12px;
}

.vn-service-content h3 {
  color: white;
  font-size: 27px;
  font-weight: 800;
  margin-bottom: 12px;
}

.vn-service-content p {
  color: #c2c1cc;
  font-size: 15px;
  line-height: 1.75;
  margin: 0;
}

.vn-service-open {
  position: absolute;
  z-index: 3;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8,8,15,.78);
  border: 1px solid rgba(255,255,255,.2);
  color: white;
}

.vn-service-game {
  min-height: 400px;
}

.vn-service-discord {
  background:
    radial-gradient(circle at 75% 20%,rgba(89,100,242,.35),transparent 45%),
    linear-gradient(145deg,#171629,#0c0c15);
}

.vn-service-symbol {
  position: absolute;
  top: 35px;
  right: 55px;
  color: rgba(130,137,255,.28);
  font-size: 115px;
}

.vn-service-infra,
.vn-service-web {
  background:
    radial-gradient(circle at 85% 20%,rgba(220,20,60,.20),transparent 45%),
    linear-gradient(145deg,#15121b,#0c0c12);
}

.vn-infra-art {
  position: absolute;
  inset: 0 0 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle,rgba(220,20,60,.12),transparent 55%);
}

.vn-infra-cube {
  width: 115px;
  height: 115px;
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 48px;
  background: linear-gradient(145deg,#d91d49,#700b29);
  box-shadow: 0 15px 55px rgba(220,20,60,.18);
}

.vn-infra-line {
  position: absolute;
  width: 210px;
  height: 210px;
  border: 1px solid rgba(220,20,60,.18);
  border-radius: 50%;
}

.vn-infra-art-two .vn-infra-cube {
  background: linear-gradient(145deg,#313746,#141721);
}

.vn-infra-art-three .vn-infra-cube {
  background: linear-gradient(145deg,#4c3340,#17111b);
}

.vn-infra-art-four .vn-infra-cube {
  background: linear-gradient(145deg,#263d54,#111927);
}

/* PANEL */

.vn-panel-section {
  background:
    radial-gradient(ellipse at 85% 40%,rgba(220,20,60,.10),transparent 45%),
    #0c0b11;
}

.vn-panel-layout {
  display: grid;
  grid-template-columns: .85fr 1.15fr;
  align-items: center;
  gap: 55px;
}

.vn-panel-benefits {
  display: grid;
  gap: 17px;
  margin: 30px 0;
}

.vn-panel-benefits div {
  color: #c4c3ce;
  font-size: 15px;
}

.vn-panel-benefits i {
  color: #e63a60;
  width: 27px;
}

.vn-minecraft-panel {
  overflow: hidden;
  border: 1px solid #30303c;
  border-radius: 19px;
  background: #0a0b11;
  box-shadow: 0 25px 70px rgba(0,0,0,.45);
}

.vn-panel-browser {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 17px 20px;
  border-bottom: 1px solid #282832;
  background: #11121a;
}

.vn-browser-dots {
  display: flex;
  gap: 6px;
}

.vn-browser-dots span {
  width: 10px;
  height: 10px;
  background: #dc244b;
  border-radius: 50%;
}

.vn-browser-dots span:nth-child(2) { background: #eab308; }
.vn-browser-dots span:nth-child(3) { background: #22c55e; }

.vn-browser-address {
  flex: 1;
  color: #858595;
  background: #090a10;
  border-radius: 20px;
  padding: 7px 13px;
  font-size: 12px;
  text-align: center;
}

.vn-panel-online {
  color: #26c98b;
  font-size: 11px;
  white-space: nowrap;
}

.vn-panel-content {
  padding: 25px;
}

.vn-panel-server-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 25px;
  gap: 12px;
}

.vn-panel-small {
  color: #ed6685;
  font-size: 10px;
  letter-spacing: 2px;
  font-weight: 800;
}

.vn-panel-server-head h3 {
  color: white;
  font-size: 23px;
  font-weight: 800;
  margin: 7px 0;
}

.vn-panel-server-head p {
  color: #858595;
  margin: 0;
  font-size: 12px;
}

.vn-running {
  color: #26c98b;
  background: rgba(38,201,139,.08);
  border: 1px solid rgba(38,201,139,.2);
  border-radius: 30px;
  padding: 8px 12px;
  font-size: 12px;
}

.vn-resource-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin-bottom: 20px;
}

.vn-resource {
  background: #121520;
  border: 1px solid #262b3b;
  border-radius: 12px;
  padding: 14px;
}

.vn-resource > span {
  display: block;
  color: #9298aa;
  font-size: 12px;
  margin-bottom: 10px;
}

.vn-resource strong {
  color: white;
  font-size: 17px;
  display: block;
  margin-bottom: 13px;
}

.vn-progress {
  height: 6px;
  background: #252b38;
  border-radius: 20px;
  overflow: hidden;
}

.vn-progress i {
  display: block;
  height: 100%;
  border-radius: 20px;
  background: #d91d49;
}

.vn-progress-blue i { background: #36a6e9; }
.vn-progress-purple i { background: #9a65e8; }

.vn-console {
  background: #05060a;
  border: 1px solid #252630;
  border-radius: 12px;
  padding: 18px;
  color: #a5a6b6;
  font-family: monospace;
  font-size: 12px;
  line-height: 2;
  overflow: hidden;
}

.vn-console > div span {
  color: #25c993;
}

.vn-console > div .vn-console-warning {
  color: #eab308;
}

.vn-console-cursor {
  color: white !important;
}

.vn-panel-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.vn-panel-actions button {
  border: 1px solid #30303b;
  background: #171923;
  color: #fff;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 12px;
}

.vn-panel-actions button:first-child {
  background: #087f60;
  border-color: #087f60;
}

.vn-panel-actions button:nth-child(2) {
  background: #a91636;
  border-color: #a91636;
}

.vn-panel-disclaimer {
  color: #727383;
  font-size: 10px;
  text-align: right;
  margin-top: 15px;
}

/* STANDARD GRID */

.vn-standard-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 16px;
}

.vn-standard-card {
  padding: 27px;
  border-radius: 15px;
  border: 1px solid #272631;
  background: #101016;
  transition: .25s ease;
}

.vn-standard-card:hover {
  border-color: rgba(220,20,60,.55);
  transform: translateY(-4px);
}

.vn-standard-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(220,20,60,.12);
  color: #ec4165;
  font-size: 19px;
  margin-bottom: 20px;
}

.vn-standard-card h3 {
  color: white;
  font-size: 17px;
  font-weight: 750;
}

.vn-standard-card p {
  color: #9999a8;
  font-size: 14px;
  line-height: 1.7;
  margin: 0;
}

/* COMPARISON */

.vn-compare-section {
  background: #0c0b11;
}

.vn-compare-table {
  border: 1px solid #292832;
  border-radius: 15px;
  overflow: hidden;
}

.vn-compare-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 21px 25px;
  border-bottom: 1px solid #292832;
  color: #b7b6c2;
  font-size: 14px;
}

.vn-compare-row:last-child {
  border-bottom: 0;
}

.vn-compare-row strong {
  color: #f1eff5;
  font-weight: 650;
}

.vn-compare-row strong i {
  color: #e63b61;
  margin-right: 8px;
}

.vn-compare-head {
  background: #14121a;
  color: #e66b88;
  font-weight: 800;
  letter-spacing: 1.5px;
  font-size: 11px;
}

/* NETWORK */

.vn-network-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 35px;
  padding: 55px;
  background:
    radial-gradient(circle at 85% 50%,rgba(220,20,60,.17),transparent 45%),
    #111018;
  border: 1px solid #302832;
  border-radius: 20px;
}

.vn-network-graphic {
  position: relative;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.vn-network-ring {
  position: absolute;
  border: 1px solid rgba(220,20,60,.23);
  border-radius: 50%;
}

.vn-ring-one { width: 220px; height: 220px; }
.vn-ring-two { width: 310px; height: 310px; }

.vn-network-center {
  width: 100px;
  height: 100px;
  background: linear-gradient(145deg,#e92351,#870d30);
  color: white;
  border-radius: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  z-index: 2;
}

.vn-network-node {
  position: absolute;
  width: 47px;
  height: 47px;
  border-radius: 14px;
  background: #191720;
  border: 1px solid #40303a;
  color: #ef5b7a;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

.vn-node-one { top: 25px; left: 28%; }
.vn-node-two { right: 16%; top: 45%; }
.vn-node-three { bottom: 15px; left: 28%; }

/* FAQ */

.vn-faq-list {
  max-width: 850px;
  margin: auto;
}

.vn-faq-item {
  border: 1px solid #2b2934;
  background: #101016;
  border-radius: 12px;
  margin-bottom: 12px;
  overflow: hidden;
}

.vn-faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  padding: 21px 23px;
  color: #fff;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.vn-faq-question i {
  color: #e34b6d;
  transition: transform .2s;
}

.vn-faq-item.open .vn-faq-question i {
  transform: rotate(45deg);
}

.vn-faq-answer {
  display: none;
  padding: 0 23px 21px;
  color: #a5a4b1;
  font-size: 14px;
  line-height: 1.8;
}

.vn-faq-item.open .vn-faq-answer {
  display: block;
}

/* DISCORD */

.vn-discord-section {
  padding-top: 35px;
}

.vn-discord-banner {
  display: flex;
  align-items: center;
  gap: 27px;
  padding: 42px;
  border: 1px solid rgba(220,20,60,.3);
  border-radius: 19px;
  background:
    radial-gradient(circle at 15% 50%,rgba(220,20,60,.18),transparent 45%),
    #121019;
}

.vn-discord-icon {
  width: 76px;
  height: 76px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  background: rgba(88,101,242,.17);
  color: #8290ff;
  font-size: 35px;
}

.vn-discord-copy {
  flex: 1;
}

.vn-discord-copy > span {
  color: #ed6685;
  font-weight: 800;
  letter-spacing: 2px;
  font-size: 11px;
}

.vn-discord-copy h2 {
  color: white;
  font-size: 28px;
  font-weight: 800;
  margin: 8px 0;
}

.vn-discord-copy p {
  color: #a3a2b0;
  font-size: 14px;
  margin: 0;
}

.vn-discord-button {
  flex-shrink: 0;
  background: #5865f2;
  color: white !important;
}

/* RESPONSIVE */

@media(max-width:991px) {
  .vn-hero-inner,
  .vn-panel-layout,
  .vn-network-card {
    grid-template-columns: 1fr;
  }

  .vn-hero-inner {
    gap: 45px;
  }

  .vn-hero-visual {
    min-height: 350px;
  }

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

@media(max-width:767px) {
  .vn-hero {
    padding: 55px 0 55px;
  }

  .vn-hero-inner {
    gap: 35px;
  }

  .vn-hero h1 {
    font-size: 43px;
    letter-spacing: -1.8px;
  }

  .vn-hero-description {
    font-size: 16px;
  }

  .vn-hero-points {
    gap: 15px;
    flex-direction: column;
    margin-top: 30px;
  }

  .vn-hero-visual {
    min-height: 340px;
  }

  .vn-hero-core {
    width: 115px;
    height: 115px;
    font-size: 48px;
  }

  .vn-floating-label {
    padding: 11px 13px;
    font-size: 12px;
  }

  .vn-section {
    padding: 65px 0;
  }

  .vn-section-heading h2,
  .vn-panel-copy h2,
  .vn-network-copy h2 {
    font-size: 35px;
  }

  .vn-services-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .vn-service-card,
  .vn-service-game {
    min-height: 350px;
    padding: 23px;
  }

  .vn-service-content h3 {
    font-size: 23px;
  }

  .vn-standard-grid {
    grid-template-columns: 1fr;
  }

  .vn-resource-grid {
    gap: 7px;
  }

  .vn-resource {
    padding: 10px 8px;
  }

  .vn-resource strong {
    font-size: 13px;
  }

  .vn-panel-content {
    padding: 15px;
  }

  .vn-browser-address {
    font-size: 9px;
  }

  .vn-panel-actions button {
    padding: 9px 10px;
    font-size: 11px;
  }

  .vn-network-card {
    padding: 25px 20px;
  }

  .vn-network-graphic {
    height: 270px;
  }

  .vn-ring-one { width: 170px; height: 170px; }
  .vn-ring-two { width: 245px; height: 245px; }

  .vn-compare-row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 17px;
  }

  .vn-discord-banner {
    flex-direction: column;
    align-items: flex-start;
    padding: 28px 22px;
  }

  .vn-discord-button {
    width: 100%;
  }
}

@media(prefers-reduced-motion:reduce) {
  .vn-service-card,
  .vn-primary-btn,
  .vn-standard-card {
    transition: none !important;
  }
}


/* ==========================================
   VAMPIRE NODES - FINAL LAYOUT REFINEMENT
   ========================================== */

/* 1. CLEAN HERO - REMOVE FLOATING COMPUTE AREA */

.vn-hero-inner {
    display: block !important;
    max-width: 1120px;
}

.vn-hero-copy {
    max-width: 950px;
}

.vn-hero-visual {
    display: none !important;
}

.vn-hero {
    background:
      radial-gradient(ellipse at 90% 35%,rgba(150,15,48,.17),transparent 45%),
      linear-gradient(120deg,#08080c,#10080d);
}

/* 2. HORIZONTAL GAME AND SERVICE CAROUSEL */

.vn-services-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 18px !important;
    padding: 5px 2px 22px !important;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #9e183b #17131b;
}

.vn-service-card {
    flex: 0 0 265px !important;
    width: 265px !important;
    min-width: 265px !important;
    height: 350px !important;
    min-height: 350px !important;
    scroll-snap-align: start;
    border-radius: 18px !important;
    position: relative;
}

/* Game artwork */

.vn-service-game {
    background: #11111a;
}

.vn-service-game > img {
    display: block !important;
    object-fit: cover !important;
    object-position: center !important;
    opacity: .88;
}

.vn-service-game .vn-service-shade {
    background: linear-gradient(
      0deg,
      rgba(5,5,10,.98) 0%,
      rgba(5,5,10,.65) 42%,
      rgba(5,5,10,.08) 100%
    ) !important;
}

.vn-service-game .vn-service-content {
    margin-top: auto;
}

/* Discord: same visual family as VPS */

.vn-service-discord {
    background:
      radial-gradient(circle at 50% 38%,rgba(88,101,242,.22),transparent 48%),
      linear-gradient(145deg,#171629,#0b0b12) !important;
}

.vn-service-discord .vn-service-symbol {
    position: absolute !important;
    top: 45px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    font-size: 105px !important;
    color: rgba(130,137,255,.65) !important;
}

.vn-service-discord .vn-service-content {
    margin-top: auto;
}

/* VPS / VDS / other symbolic cards */

.vn-service-infra .vn-infra-art {
    inset: 0 0 80px;
}

.vn-service-card:hover .vn-infra-cube {
    transform: translateY(-5px);
    transition: .3s ease;
}

/* 3. DESKTOP AND TABLET SERVICE ROW */

@media(min-width:768px) {
    .vn-services-grid {
        gap: 20px !important;
    }

    .vn-service-card {
        flex-basis: 265px !important;
    }
}

/* 4. MOBILE SWIPE CAROUSEL */

@media(max-width:767px) {
    .vn-services-grid {
        margin-right: -15px;
        padding-right: 22px !important;
        gap: 14px !important;
        scroll-padding-left: 2px;
        scroll-snap-type: x mandatory;
    }

    .vn-service-card {
        flex: 0 0 78vw !important;
        width: 78vw !important;
        min-width: 78vw !important;
        height: 340px !important;
        min-height: 340px !important;
    }

    .vn-service-game > img {
        height: 100% !important;
    }

    .vn-service-content h3 {
        font-size: 22px !important;
    }

    .vn-service-content p {
        font-size: 14px !important;
    }
}

/* 5. INLINE NAVIGATION - DESKTOP AND TABLETS */

@media(min-width:768px) {
    .navbar .navbar-toggler,
    .navbar .navbar-toggle {
        display: none !important;
    }

    .navbar .navbar-collapse,
    .navbar .navbar-collapse.collapse {
        display: flex !important;
        flex: 1 1 auto !important;
        justify-content: flex-end !important;
        align-items: center !important;
        height: auto !important;
        visibility: visible !important;
        overflow: visible !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    .navbar .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 5px !important;
        white-space: nowrap !important;
        float: none !important;
        margin: 0 !important;
    }

    .navbar .navbar-nav > li {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }

    .navbar .navbar-nav > li > a {
        white-space: nowrap !important;
        padding: 12px 9px !important;
        font-size: 13px !important;
    }
}

/* Keep desktop header compact on smaller tablets */

@media(min-width:768px) and (max-width:991px) {
    .navbar .navbar-nav {
        gap: 0 !important;
    }

    .navbar .navbar-nav > li > a {
        padding: 10px 5px !important;
        font-size: 11px !important;
    }
}

/* Mobile keeps its original hamburger navigation */

@media(max-width:767px) {
    .navbar .navbar-toggler,
    .navbar .navbar-toggle {
        display: block !important;
    }
}


/* REMOVE OLD HOMEPAGE FOUR-COLUMN VALUE STRIP */
.vn-value-strip {
    display: none !important;
}

/* VAMPIRE NODES FOOTER */
.vn-main-footer {
    display: block !important;
    width: 100%;
    position: relative;
    z-index: 2;
    background: #08080c !important;
    border-top: 1px solid #27202a;
    padding: 65px 0 22px;
    margin-top: 65px;
    color: #a7a4b0;
}

.vn-footer-top {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr 1fr;
    gap: 38px;
    padding-bottom: 48px;
}

.vn-footer-logo {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 1px;
}

.vn-footer-logo > span:last-child {
    color: #dc143c;
}

.vn-footer-logo-icon {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    background: #dc143c;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.vn-footer-brand p {
    max-width: 300px;
    margin: 17px 0 22px;
    color: #92909d;
    font-size: 14px;
    line-height: 1.8;
}

.vn-footer-discord {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 17px;
    border: 1px solid #34303a;
    border-radius: 10px;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    transition: .2s ease;
}

.vn-footer-discord:hover {
    background: rgba(220,20,60,.12);
    border-color: #dc143c;
}

.vn-footer-column {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.vn-footer-column h5 {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    margin: 5px 0 8px;
}

.vn-footer-column a {
    color: #92909d !important;
    font-size: 13px;
    text-decoration: none !important;
    transition: color .2s;
}

.vn-footer-column a:hover {
    color: #ed315a !important;
}

.vn-footer-bottom {
    border-top: 1px solid #24212a;
    padding-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: #777581;
}

.vn-footer-tagline {
    color: #dc5472;
    letter-spacing: .5px;
}

@media(max-width:767px) {
    .vn-main-footer {
        padding: 45px 0 20px;
        margin-top: 40px;
    }

    .vn-footer-top {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 32px 20px;
    }

    .vn-footer-brand {
        grid-column: 1 / -1;
    }

    .vn-footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media(max-width:380px) {
    .vn-footer-top {
        grid-template-columns: 1fr 1fr;
        gap: 28px 12px;
    }
}


/* ===== VAMPIRE NODES FINAL NAV / FOOTER FIX ===== */
.vn-navbar {
 position:sticky!important;
 top:0;
 z-index:9999!important;
 background:rgba(7,7,11,.97)!important;
 border-bottom:1px solid #29232e!important;
}
.vn-nav-container {
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:18px;
 min-height:76px;
}
.vn-nav-links {
 display:flex!important;
 flex-wrap:nowrap!important;
 align-items:center;
 justify-content:center;
 gap:clamp(10px,1.4vw,22px)!important;
 list-style:none;
 margin:0!important;
 padding:0!important;
}
.vn-nav-links a {
 white-space:nowrap;
 color:#dedce5!important;
 font-size:clamp(11px,.9vw,14px)!important;
 font-weight:600!important;
 text-decoration:none!important;
}
.vn-nav-links a:hover {color:#ed315a!important}
.vn-nav-actions {
 display:flex;
 align-items:center;
 gap:12px;
 flex-shrink:0;
}
.vn-cart-link {
 display:flex;
 align-items:center;
 gap:7px;
 color:#fff!important;
 text-decoration:none!important;
 padding:10px;
 border:1px solid #302936;
 border-radius:9px;
}
.vn-cart-count {
 background:#dc143c;
 color:#fff;
 border-radius:20px;
 padding:2px 7px;
 font-size:11px;
}
.vn-mobile-btn {display:none}
.vn-mobile-drawer {display:none}
.vn-mobile-link {
 display:block;
 padding:13px 8px;
 color:#eee!important;
 text-decoration:none!important;
 border-bottom:1px solid #28232d;
}
.vn-mobile-link:hover {color:#ed315a!important}
.vn-custom-footer {
 display:block!important;
 background:#07070b!important;
 border-top:1px solid #29232e;
 padding:65px 0 25px!important;
 margin-top:0!important;
}
.vn-footer-grid {
 display:grid;
 grid-template-columns:1.5fr 1fr 1fr 1fr;
 gap:30px;
 padding-bottom:40px;
}
.vn-footer-bottom {
 display:flex;
 justify-content:space-between;
 flex-wrap:wrap;
 gap:12px;
 padding-top:22px;
 border-top:1px solid #29232e;
 color:#898694;
 font-size:12px;
}
/* Remove the empty legacy WHMCS footer content, retain custom footer */
footer#footer {padding:0!important;background:#07070b!important}
footer#footer > .container {display:none!important}
.vn-standard-card {
 background:linear-gradient(145deg,#15121b,#0c0b11)!important;
 border:1px solid #302633!important;
 border-radius:16px!important;
 padding:28px!important;
 transition:transform .25s,border-color .25s,box-shadow .25s;
}
.vn-standard-card:hover {
 transform:translateY(-5px);
 border-color:#dc3158!important;
 box-shadow:0 12px 35px rgba(220,20,60,.12);
}
.vn-standard-icon {
 width:48px;height:48px;
 display:flex;align-items:center;justify-content:center;
 border-radius:13px;
 background:rgba(220,20,60,.13);
 color:#f04b70!important;
 font-size:20px;
 margin-bottom:20px;
}
.vn-standard-card h3 {color:#fff!important;font-size:18px!important}
.vn-standard-card p {color:#aaa6b4!important;line-height:1.7}

/* Hide the mobile category/action dropdown selectors */
#order-standard_cart .categories-collapsed {
 display:none!important;
}

@media(min-width:992px) {
 .vn-mobile-btn,.vn-mobile-drawer {display:none!important}
}
@media(max-width:1199px) and (min-width:992px) {
 .vn-nav-container {gap:10px}
 .vn-nav-links {gap:9px!important}
 .vn-nav-links a {font-size:11px!important}
 .vn-btn-crimson,.vn-btn-signin {padding:9px!important;font-size:11px!important}
}
@media(max-width:991px) {
 .vn-nav-container {min-height:68px}
 .vn-nav-links {display:none!important}
 .vn-mobile-btn {
  display:flex!important;
  align-items:center;
  justify-content:center;
  width:44px;height:44px;
  background:#15121b;
  border:1px solid #302936;
  border-radius:10px;
  color:#fff;
 }
 .vn-nav-actions > .vn-btn-signin,
 .vn-nav-actions > .vn-btn-crimson {display:none!important}
 .vn-mobile-drawer {
  display:none;
  background:#0c0b11;
  border-top:1px solid #29232e;
 }
 .vn-mobile-drawer.is-open {display:block!important}
 .vn-footer-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
 .vn-footer-brand {grid-column:1/-1}
 .vn-footer-bottom {flex-direction:column}
}
@media(max-width:575px) {
 .vn-footer-grid {gap:25px 16px}
 .vn-footer-column h4 {font-size:11px}
}

/* ===== UNIFIED GAME SERVICE ARTWORK ===== */

.vn-service-card {
 position:relative;
 overflow:hidden;
 isolation:isolate;
 background:#0b0a10!important;
 border:1px solid #29232e!important;
 border-radius:16px!important;
}

.vn-game-art {
 position:absolute;
 inset:0;
 display:flex;
 align-items:center;
 justify-content:center;
 overflow:hidden;
 z-index:0;
 background:
  radial-gradient(ellipse at 50% 40%,rgba(220,20,60,.17),transparent 60%),
  linear-gradient(145deg,#17121d,#09090e 75%);
}

.vn-game-art:before {
 content:"";
 position:absolute;
 width:230px;
 height:230px;
 border:1px solid rgba(220,20,60,.16);
 border-radius:50%;
 box-shadow:0 0 0 30px rgba(220,20,60,.025),
            0 0 0 60px rgba(220,20,60,.02);
}

.vn-game-art:after {
 content:"";
 position:absolute;
 inset:0;
 background:linear-gradient(180deg,transparent 20%,rgba(5,5,9,.2) 55%,#09090e 100%);
}

.vn-game-art i {
 position:relative;
 z-index:1;
 font-size:105px;
 color:rgba(236,55,94,.72);
 text-shadow:0 0 45px rgba(220,20,60,.3);
 transition:transform .35s ease,color .35s ease;
}

.vn-art-minecraft {
 background:
  radial-gradient(ellipse at 50% 35%,rgba(119,76,53,.23),transparent 55%),
  linear-gradient(145deg,#17151a,#09090e);
}

.vn-art-minecraft i {
 color:#a58a78;
 text-shadow:0 0 40px rgba(165,138,120,.25);
}

.vn-art-gta {
 background:
  radial-gradient(ellipse at 65% 35%,rgba(220,20,60,.22),transparent 55%),
  linear-gradient(145deg,#191119,#09090e);
}

.vn-art-gta i {
 color:#e34a69;
}

.vn-art-discord {
 background:
  radial-gradient(ellipse at 50% 35%,rgba(88,101,242,.17),transparent 60%),
  linear-gradient(145deg,#141421,#09090e);
}

.vn-art-discord i {
 color:#9ba4ff;
 text-shadow:0 0 40px rgba(88,101,242,.3);
}

.vn-service-card:hover .vn-game-art i {
 transform:scale(1.12) translateY(-5px);
}

.vn-service-shade {
 z-index:2!important;
}

.vn-service-content {
 position:relative;
 z-index:3!important;
}

.vn-service-open {
 z-index:4!important;
}

.vn-game-art ~ .vn-service-shade {
 background:linear-gradient(
  180deg,
  rgba(5,5,9,.03) 0%,
  rgba(5,5,9,.18) 35%,
  rgba(5,5,9,.96) 100%
 )!important;
}

@media(max-width:767px) {
 .vn-game-art i {font-size:78px}
}

/* =========================================================
   VAMPIRE NODES - REFINED NAVIGATION / MOBILE DRAWER
   ========================================================= */

.vn-navbar {
    position: relative;
    z-index: 1000;
    background: #08080c;
    border-bottom: 1px solid rgba(255,255,255,.10);
}

.vn-nav-container {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
}

.vn-brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    text-decoration: none !important;
}

.vn-brand-icon {
    width: 48px;
    height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: #fff;
    font-size: 22px;
    background: linear-gradient(145deg,#ed174c,#a90031);
    box-shadow: 0 5px 22px rgba(220,0,58,.24);
}

.vn-brand-name {
    color: #fff;
    font-size: 25px;
    font-weight: 850;
    letter-spacing: 2px;
    white-space: nowrap;
}

.vn-brand-name b {
    color: #e3184e;
}

.vn-nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 19px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
}

.vn-nav-links li {
    margin: 0;
    padding: 0;
}

.vn-nav-links a {
    color: #d4d4dc;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 650;
    white-space: nowrap;
    transition: color .2s ease;
}

.vn-nav-links a i {
    color: #e3184e;
    margin-right: 5px;
}

.vn-nav-links a:hover {
    color: #ff315f;
}

.vn-nav-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.vn-cart-link {
    min-width: 62px;
    height: 48px;
    padding: 0 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #fff !important;
    text-decoration: none !important;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 12px;
    font-size: 19px;
}

.vn-cart-count {
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #e3184e;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}

.vn-auth-link {
    height: 46px;
    padding: 0 17px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 10px;
    background: #df1749;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 750;
    white-space: nowrap;
    transition: background .2s ease, transform .2s ease;
}

.vn-auth-link:hover {
    background: #fa285b;
    transform: translateY(-1px);
}

.vn-mobile-toggle {
    display: none;
    width: 54px;
    height: 54px;
    align-items: center;
    justify-content: center;
    color: #ed174c;
    background: #0b0b10;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 13px;
    font-size: 23px;
    cursor: pointer;
    transition: .2s ease;
}

.vn-mobile-toggle.is-active {
    color: #fff;
    background: #d91546;
    border-color: #d91546;
}

.vn-mobile-drawer {
    display: none;
}

/* Mobile and tablet drawer */
@media (max-width: 1100px) {
    .vn-nav-container {
        min-height: 88px;
    }

    .vn-nav-links {
        display: none !important;
    }

    .vn-nav-actions {
        margin-left: auto;
    }

    .vn-nav-actions > .vn-auth-link {
        display: none !important;
    }

    .vn-mobile-toggle {
        display: inline-flex !important;
    }

    .vn-mobile-drawer {
        display: block;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        max-height: calc(100vh - 88px);
        overflow-y: auto;
        overscroll-behavior: contain;
        background: #0b0b10;
        border-top: 1px solid rgba(255,255,255,.09);
        border-bottom: 1px solid rgba(227,24,78,.30);
        box-shadow: 0 22px 45px rgba(0,0,0,.55);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
        transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
    }

    .vn-mobile-drawer.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }

    .vn-drawer-inner {
        padding: 22px 24px 25px;
    }

    .vn-drawer-heading {
        display: flex;
        align-items: center;
        gap: 13px;
        margin: 4px 0 10px;
        color: #ed426b;
        font-size: 11px;
        font-weight: 850;
        letter-spacing: 2.2px;
    }

    .vn-drawer-line {
        height: 1px;
        flex: 1;
        background: linear-gradient(90deg,rgba(227,24,78,.45),transparent);
    }

    .vn-drawer-link {
        min-height: 57px;
        display: flex;
        align-items: center;
        gap: 14px;
        padding: 0 10px;
        color: #e8e8ed !important;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(255,255,255,.09);
        font-size: 15px;
        font-weight: 650;
        transition: background .2s ease, color .2s ease;
    }

    .vn-drawer-link:hover {
        color: #ff456d !important;
        background: rgba(227,24,78,.055);
    }

    .vn-drawer-icon {
        width: 31px;
        height: 31px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        border-radius: 9px;
        background: rgba(227,24,78,.10);
        color: #ed2858;
        font-size: 15px;
    }

    .vn-drawer-arrow {
        margin-left: auto;
        color: #666671;
        font-size: 11px;
    }

    .vn-drawer-separator {
        height: 1px;
        margin: 21px 0;
        background: linear-gradient(90deg,rgba(227,24,78,.65),rgba(255,255,255,.08),transparent);
    }

    .vn-drawer-secondary {
        min-height: 51px;
        font-size: 14px;
        color: #c9c9d1 !important;
    }

    .vn-drawer-account {
        min-height: 52px;
        margin-top: 10px;
        padding: 0 16px;
        display: flex;
        align-items: center;
        gap: 12px;
        border-radius: 10px;
        text-decoration: none !important;
        font-size: 14px;
        font-weight: 750;
    }

    .vn-drawer-primary {
        color: #fff !important;
        background: linear-gradient(100deg,#e3184e,#a90c37);
        box-shadow: 0 7px 22px rgba(227,24,78,.16);
    }

    .vn-drawer-primary > i:first-child {
        font-size: 17px;
    }

    .vn-account-arrow {
        margin-left: auto;
    }

    .vn-drawer-register {
        color: #f0dce2 !important;
        background: rgba(227,24,78,.10);
        border: 1px solid rgba(227,24,78,.30);
    }

    .vn-drawer-logout {
        color: #e8a4b5 !important;
        background: rgba(255,255,255,.045);
        border: 1px solid rgba(255,255,255,.08);
    }

    .vn-drawer-cart {
        min-height: 50px;
        margin-top: 10px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        gap: 12px;
        border: 1px solid rgba(255,255,255,.12);
        border-radius: 10px;
        color: #eee !important;
        text-decoration: none !important;
        font-size: 14px;
        font-weight: 700;
    }

    .vn-drawer-cart > i {
        color: #ed2858;
    }

    .vn-drawer-cart .vn-cart-count {
        margin-left: auto;
    }

    .vn-drawer-footer {
        margin-top: 23px;
        padding-top: 16px;
        border-top: 1px solid rgba(255,255,255,.08);
        display: flex;
        align-items: center;
        gap: 8px;
        color: #777782;
        font-size: 10px;
        font-weight: 750;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }

    .vn-drawer-footer > span:not(.vn-drawer-footer-dot) {
        color: #e3184e;
    }

    .vn-drawer-footer-dot {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #e3184e;
        box-shadow: 0 0 10px rgba(227,24,78,.8);
    }
}

@media (max-width: 480px) {
    .vn-nav-container {
        padding-left: 16px;
        padding-right: 16px;
    }

    .vn-brand {
        gap: 10px;
    }

    .vn-brand-icon {
        width: 43px;
        height: 43px;
        font-size: 19px;
    }

    .vn-brand-name {
        font-size: 19px;
        letter-spacing: 1.2px;
    }

    .vn-nav-actions {
        gap: 8px;
    }

    .vn-cart-link {
        min-width: 55px;
        height: 46px;
        gap: 7px;
        padding: 0 8px;
    }

    .vn-mobile-toggle {
        width: 49px;
        height: 49px;
    }

    .vn-drawer-inner {
        padding-left: 18px;
        padding-right: 18px;
    }
}

/* SERVICE CARD LABEL - RECTANGULAR, ROUNDED, NO ARROW */
.vn-service-open {
    position: absolute;
    top: 20px;
    right: 20px;
    width: auto !important;
    height: auto !important;
    min-width: 94px;
    padding: 10px 14px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(227,24,78,.48) !important;
    border-radius: 10px !important;
    background: rgba(227,24,78,.13) !important;
    color: #ff5278 !important;
    font-size: 10px !important;
    font-weight: 850 !important;
    letter-spacing: 1.4px;
    line-height: 1.2;
    box-shadow: 0 5px 18px rgba(0,0,0,.2);
    z-index: 5;
}

/* FAQ ACCORDION - MOBILE AND DESKTOP */
.vn-faq-item {
    overflow: hidden;
}

.vn-faq-question {
    width: 100%;
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    cursor: pointer !important;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}

.vn-faq-question i {
    flex-shrink: 0;
    color: #ed2858 !important;
    transition: transform .25s ease, color .25s ease;
}

.vn-faq-item.open .vn-faq-question i {
    color: #ff6687 !important;
    transform: rotate(180deg);
}

.vn-faq-answer {
    display: block !important;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: max-height .35s ease, opacity .25s ease,
                padding .3s ease;
}

.vn-faq-item.open .vn-faq-answer {
    max-height: 350px !important;
    opacity: 1;
    padding-top: 12px !important;
    padding-bottom: 18px !important;
}

.vn-faq-question:focus-visible {
    outline: 2px solid #e3184e;
    outline-offset: 3px;
}

/* MATCHED ABSTRACT ARTWORK FOR ALL SERVICE TYPES */
.vn-service-card .vn-infra-art {
    position: relative;
    min-height: 205px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 48%, rgba(225,20,73,.15), transparent 58%),
        linear-gradient(145deg, #111119, #0b0b10);
    border-radius: 16px;
}

.vn-service-card .vn-infra-cube {
    position: relative;
    z-index: 2;
    width: 116px;
    height: 116px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 27px;
    color: #fff;
    font-size: 48px;
    background: linear-gradient(145deg, #303442, #171923);
    border: 1px solid rgba(255,255,255,.09);
    box-shadow: 0 15px 45px rgba(0,0,0,.35), 0 0 35px rgba(225,20,73,.12);
}

.vn-service-card .vn-infra-line {
    position: absolute;
    width: 245px;
    height: 245px;
    border: 1px solid rgba(225,20,73,.20);
    border-radius: 50%;
    pointer-events: none;
}

.vn-service-card .vn-art-minecraft .vn-infra-cube {
    color: #ff6688;
}

.vn-service-card .vn-art-gta .vn-infra-cube {
    color: #ff6688;
}

.vn-service-card .vn-art-discord .vn-infra-cube {
    color: #ff6688;
}

/* VIEW PLANS NOW SITS BELOW THE DESCRIPTION */
.vn-service-card .vn-service-content {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.vn-service-card .vn-service-open {
    position: static !important;
    inset: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    margin-top: 19px;
    padding: 11px 16px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid rgba(227,24,78,.48) !important;
    border-radius: 10px !important;
    background: rgba(227,24,78,.12) !important;
    color: #ff5278 !important;
    font-size: 11px !important;
    font-weight: 850 !important;
    letter-spacing: 1.3px;
    line-height: 1.2;
    box-shadow: none !important;
    z-index: 2;
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.vn-service-card:hover .vn-service-open {
    background: #df1749 !important;
    color: #fff !important;
    border-color: #df1749 !important;
}

.vn-service-card .vn-service-open i {
    font-size: 11px;
}

/* ======================================================
   VAMPIRE NODES STANDARD - FOUR FEATURE CARDS
   ====================================================== */

.vn-approach-section {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(190,10,55,.075), transparent 55%),
        #0b0a0f;
}

.vn-approach-heading {
    max-width: 760px;
    margin-bottom: 48px;
}

.vn-approach-heading h2 {
    max-width: 700px;
}

.vn-approach-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.vn-approach-card {
    position: relative;
    min-height: 265px;
    padding: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: linear-gradient(145deg, #15141c, #0e0d13 75%);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 20px;
    transition: transform .25s ease, border-color .25s ease,
                box-shadow .25s ease;
}

.vn-approach-card::before {
    content: "";
    position: absolute;
    width: 210px;
    height: 210px;
    right: -90px;
    top: -100px;
    border-radius: 50%;
    background: rgba(220,15,65,.10);
    filter: blur(35px);
    pointer-events: none;
}

.vn-approach-card:hover {
    transform: translateY(-5px);
    border-color: rgba(227,24,78,.45);
    box-shadow: 0 15px 40px rgba(0,0,0,.25),
                0 0 28px rgba(227,24,78,.07);
}

.vn-approach-icon {
    position: relative;
    z-index: 1;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff5278;
    background: linear-gradient(145deg, rgba(227,24,78,.20), rgba(227,24,78,.07));
    border: 1px solid rgba(227,24,78,.24);
    border-radius: 15px;
    font-size: 23px;
    box-shadow: 0 7px 25px rgba(227,24,78,.08);
}

.vn-approach-number {
    position: absolute;
    top: 28px;
    right: 30px;
    color: rgba(255,255,255,.13);
    font-size: 35px;
    font-weight: 850;
    letter-spacing: -2px;
}

.vn-approach-card h3 {
    position: relative;
    z-index: 1;
    margin: 24px 0 10px;
    color: #fff;
    font-size: 23px;
    font-weight: 800;
}

.vn-approach-card p {
    position: relative;
    z-index: 1;
    max-width: 440px;
    margin: 0 0 25px;
    color: #aaa8b5;
    font-size: 15px;
    line-height: 1.8;
}

.vn-approach-bottom {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: auto;
    padding-top: 17px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid rgba(255,255,255,.08);
    color: #e65b7c;
    font-size: 10px;
    font-weight: 850;
    letter-spacing: 1.5px;
}

.vn-approach-bottom i {
    color: #ed2858;
    font-size: 14px;
    transition: transform .2s ease;
}

.vn-approach-card:hover .vn-approach-bottom i {
    transform: translateX(5px);
}

@media (max-width: 600px) {
    .vn-approach-heading {
        margin-bottom: 30px;
    }

    .vn-approach-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .vn-approach-card {
        min-height: 250px;
        padding: 17px;
        border-radius: 17px;
    }

    .vn-approach-icon {
        width: 45px;
        height: 45px;
        border-radius: 12px;
        font-size: 19px;
    }

    .vn-approach-number {
        top: 17px;
        right: 16px;
        font-size: 25px;
    }

    .vn-approach-card h3 {
        margin-top: 19px;
        font-size: 17px;
    }

    .vn-approach-card p {
        font-size: 12px;
        line-height: 1.65;
    }

    .vn-approach-bottom {
        font-size: 8px;
        letter-spacing: .8px;
    }
}

@media (max-width: 360px) {
    .vn-approach-grid {
        grid-template-columns: 1fr;
    }

    .vn-approach-card {
        min-height: 220px;
        padding: 22px;
    }

    .vn-approach-card h3 {
        font-size: 20px;
    }

    .vn-approach-card p {
        font-size: 14px;
    }

    .vn-approach-bottom {
        font-size: 9px;
    }
}

/* FINAL SERVICE CAROUSEL CARD REFINEMENT */

.vn-service-card {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    min-height: 0 !important;
    height: 100% !important;
    overflow: hidden !important;
    border-radius: 22px !important;
}

.vn-service-card .vn-infra-art {
    position: relative !important;
    width: 100% !important;
    height: 205px !important;
    min-height: 205px !important;
    flex: 0 0 205px !important;
    margin: 0 !important;
    padding: 20px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    background:
        radial-gradient(circle at 50% 50%, rgba(225,20,73,.17), transparent 65%),
        linear-gradient(145deg,#111119,#0b0b10) !important;
}

.vn-service-card .vn-infra-cube {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    flex: 0 0 116px !important;
    width: 116px !important;
    height: 116px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 27px !important;
}

.vn-service-card .vn-infra-line {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%,-50%) !important;
    width: 245px !important;
    height: 245px !important;
}

.vn-service-card .vn-service-content {
    position: relative !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    padding: 20px 26px 25px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
}

.vn-service-card .vn-service-content h3 {
    margin-top: 10px;
}

.vn-service-card .vn-service-content p {
    margin-bottom: 0;
}

.vn-service-card .vn-service-open {
    position: static !important;
    margin-top: auto !important;
    padding: 11px 17px !important;
    border-radius: 11px !important;
}

/* Keep artwork balanced on smaller screens */
@media(max-width:767px) {
    .vn-service-card {
        border-radius: 21px !important;
    }

    .vn-service-card .vn-infra-art {
        height: 190px !important;
        min-height: 190px !important;
        flex-basis: 190px !important;
    }

    .vn-service-card .vn-infra-cube {
        width: 108px !important;
        height: 108px !important;
        flex-basis: 108px !important;
    }

    .vn-service-card .vn-service-content {
        padding: 19px 22px 23px !important;
    }
}

/* =====================================================
   VN ORDERING EXPERIENCE
   ===================================================== */

#order-standard_cart.vn-order-catalog {
    width: 100%;
    max-width: 1200px;
    margin: 35px auto 70px;
    padding: 0 18px;
    color: #f5f5f7;
}

.vn-order-catalog .vn-order-heading {
    margin-bottom: 30px;
}

.vn-order-catalog .header-lined {
    border: 0;
    margin: 0;
    padding: 0;
}

.vn-order-catalog .header-lined h1 {
    color: #fff;
    font-size: clamp(26px, 4vw, 36px);
    font-weight: 850;
    letter-spacing: -1px;
    margin: 0 0 10px;
}

.vn-order-catalog .header-lined p {
    color: #9999a5;
    font-size: 14px;
}

.vn-order-products > .row {
    display: flex;
    flex-wrap: wrap;
    row-gap: 24px;
}

.vn-order-products .vn-plan-card {
    height: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #111116 !important;
    border: 1px solid #292831;
    border-radius: 13px;
    color: #fff !important;
    transition: border-color .25s, transform .25s, box-shadow .25s;
}

.vn-order-products .vn-plan-card:hover {
    transform: translateY(-4px);
    border-color: #e3264d;
    box-shadow: 0 12px 38px #e3264d16;
}

.vn-order-products .vn-plan-top {
    padding: 23px 23px 17px;
    border-bottom: 1px solid #292831;
    background: #15151c;
}

.vn-order-products .vn-plan-top h3 {
    color: #fff !important;
    font-size: 20px;
    font-weight: 800;
    margin: 0;
}

.vn-order-products .vn-plan-stock {
    display: inline-block;
    margin-top: 10px;
    color: #8ce0ad;
    font-size: 12px;
}

.vn-order-products .vn-plan-description {
    flex: 1;
    padding: 20px 23px;
    color: #aaaab5 !important;
    font-size: 13px;
    line-height: 1.7;
}

.vn-order-products .vn-plan-description p {
    color: #aaaab5 !important;
    margin: 0 0 15px;
}

.vn-order-products .vn-plan-description ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.vn-order-products .vn-plan-description li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 7px 0;
    color: #c6c6cf !important;
    border-bottom: 1px solid #25252d;
}

.vn-order-products .vn-feature-check {
    color: #f04464;
    font-weight: 900;
}

.vn-order-products .vn-plan-bottom {
    padding: 20px 23px 23px;
    border-top: 1px solid #292831;
    background: #131319;
}

.vn-order-products .vn-plan-price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 7px;
    margin-bottom: 19px;
    color: #fff !important;
}

.vn-order-products .vn-plan-price-label {
    width: 100%;
    color: #92929e;
    font-size: 11px;
}

.vn-order-products .vn-plan-amount {
    color: #fff !important;
    font-size: 27px;
    font-weight: 850;
}

.vn-order-products .vn-plan-cycle {
    color: #9999a5 !important;
    font-size: 12px;
}

.vn-order-products .vn-plan-setup {
    width: 100%;
    color: #92929e;
    font-size: 11px;
}

.vn-order-products a.vn-plan-button {
    width: 100%;
    min-height: 46px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 13px 18px;
    background: #e3264d !important;
    border: 1px solid #e3264d !important;
    border-radius: 7px;
    color: #fff !important;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 1px;
    text-decoration: none !important;
    transition: background .2s, box-shadow .2s;
}

.vn-order-products a.vn-plan-button:hover {
    background: #bd183a !important;
    border-color: #bd183a !important;
    color: #fff !important;
    box-shadow: 0 5px 20px #e3264d35;
}

.vn-order-products a.vn-plan-button span {
    font-size: 18px;
}

@media(max-width:767px) {
    #order-standard_cart.vn-order-catalog {
        margin-top: 22px;
        padding: 0 13px;
    }

    .vn-order-products .vn-plan-card {
        min-height: 0;
    }

    .vn-order-products .vn-plan-top {
        padding: 19px;
    }

    .vn-order-products .vn-plan-description {
        padding: 17px 19px;
    }

    .vn-order-products .vn-plan-bottom {
        padding: 18px 19px;
    }
}


/* ==========================================
   VN ORDERING - TYPOGRAPHY AND CARD POLISH
   ========================================== */

/* Main category heading */
#order-standard_cart.vn-order-catalog .header-lined h1 {
    font-size: clamp(34px, 4.5vw, 43px) !important;
    font-weight: 950 !important;
    letter-spacing: -1.8px !important;
    line-height: 1.12 !important;
    color: #ffffff !important;
    margin-bottom: 12px !important;
}

/* Plan card */
.vn-order-products .vn-plan-card {
    min-height: 0 !important;
    border-radius: 15px !important;
}

/* Plan name */
.vn-order-products .vn-plan-top {
    padding: 25px 25px 22px !important;
}

.vn-order-products .vn-plan-top h3 {
    font-size: 23px !important;
    font-weight: 900 !important;
    letter-spacing: -0.6px !important;
    line-height: 1.3 !important;
    color: #ffffff !important;
}

/* Description spacing */
.vn-order-products .vn-plan-description {
    padding: 15px 25px !important;
    flex: 0 0 auto !important;
}

/* Pricing */
.vn-order-products .vn-plan-bottom {
    padding: 22px 25px 25px !important;
}

.vn-order-products .vn-plan-amount {
    font-size: 32px !important;
    font-weight: 900 !important;
    letter-spacing: -1px !important;
    line-height: 1.2 !important;
}

.vn-order-products .vn-plan-cycle {
    font-size: 13px !important;
    font-weight: 600 !important;
}

/* Add to cart */
.vn-order-products a.vn-plan-button {
    min-height: 50px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    letter-spacing: 1.2px !important;
}

/* Mobile typography */
@media(max-width: 767px) {
    #order-standard_cart.vn-order-catalog .header-lined h1 {
        font-size: 34px !important;
        letter-spacing: -1.3px !important;
    }

    .vn-order-products .vn-plan-top {
        padding: 21px 21px 18px !important;
    }

    .vn-order-products .vn-plan-top h3 {
        font-size: 23px !important;
    }

    .vn-order-products .vn-plan-description {
        padding: 12px 21px !important;
    }

    .vn-order-products .vn-plan-bottom {
        padding: 20px 21px 22px !important;
    }
}


/* ==========================================
   VN UNIVERSAL PLAN CATALOG
   ========================================== */

.vn-universal-catalog {
    max-width: 1200px;
    width: 100%;
    margin: 35px auto 75px;
    padding: 0 20px;
    color: #fff;
}

/* Centered hero */

.vn-catalog-hero {
    min-height: 205px;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 35px 25px;
    margin-bottom: 45px;
    border: 1px solid #49202f;
    border-radius: 17px;
    background: linear-gradient(120deg,#260d19,#160d17 55%,#100f16);
}

.vn-catalog-hero-content {
    position: relative;
    z-index: 2;
}

.vn-catalog-eyebrow {
    color: #f16b86;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2.5px;
}

.vn-catalog-hero h1 {
    margin: 13px 0 8px;
    color: #fff;
    font-size: clamp(38px,5vw,52px);
    font-weight: 950;
    letter-spacing: -2px;
    line-height: 1.1;
}

.vn-catalog-hero h1 span {
    background: linear-gradient(100deg,#ff6480,#e3264d,#a51238);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.vn-catalog-hero p {
    margin: 0;
    color: #aaa1ab;
    font-size: 14px;
}

.vn-catalog-glow {
    position: absolute;
    width: 300px;
    height: 300px;
    top: -150px;
    left: calc(50% - 150px);
    border-radius: 50%;
    background: #e3264d;
    opacity: .18;
    filter: blur(85px);
}

.vn-hero-symbol {
    position: absolute;
    right: 7%;
    bottom: -25px;
    color: #ffffff08;
    font-size: 120px;
}

.vn-catalog-tagline {
    text-align: center;
    color: #aaa1ab;
}

/* Section heading */

.vn-catalog-section-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 25px;
}

.vn-catalog-section-title span {
    color: #ec5573;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
}

.vn-catalog-section-title h2 {
    margin: 7px 0 0;
    color: #fff;
    font-size: 26px;
    font-weight: 900;
}

.vn-plan-count {
    padding: 8px 12px;
    border: 1px solid #35232c;
    border-radius: 20px;
    color: #d5a1ae !important;
    font-size: 9px !important;
}

/* Universal responsive grid */

.vn-plan-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 20px;
}

/* Universal plan card */

.vn-plan-card {
    min-width: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #121116;
    border: 1px solid #33232c;
    border-radius: 14px;
    transition: transform .25s,border-color .25s,box-shadow .25s;
}

.vn-plan-card:hover {
    transform: translateY(-5px);
    border-color: #e3264d;
    box-shadow: 0 12px 35px #e3264d1c;
}

/* Crimson artwork */

.vn-plan-art {
    height: 120px;
    position: relative;
    overflow: hidden;
    padding: 15px;
    background: linear-gradient(125deg,#66152f,#371020 55%,#17111d);
}

.vn-plan-art-glow {
    position: absolute;
    width: 150px;
    height: 150px;
    right: 5px;
    top: -80px;
    border-radius: 50%;
    background: #ff285a;
    opacity: .35;
    filter: blur(55px);
}

.vn-plan-art-lines {
    position: absolute;
    width: 100px;
    height: 100px;
    right: 30px;
    bottom: -50px;
    border: 1px solid #ffffff20;
    transform: rotate(45deg);
    box-shadow: 0 0 0 20px #ffffff05,0 0 0 40px #ffffff04;
}

.vn-plan-art-brand,
.vn-plan-art-caption {
    position: relative;
    z-index: 2;
    display: block;
    color: #f6a3b5;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.vn-plan-art-caption {
    position: absolute;
    bottom: 13px;
    left: 15px;
    color: #fff;
}

.vn-plan-art-icon {
    position: absolute;
    right: 19px;
    bottom: 10px;
    color: #ffffff38;
    font-size: 48px;
}

/* Product information */

.vn-plan-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 19px;
}

.vn-plan-label {
    color: #d95774;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.5px;
}

.vn-plan-heading h3 {
    margin: 8px 0 0;
    overflow-wrap: anywhere;
    font-size: 19px;
    font-weight: 900;
    letter-spacing: -.5px;
    line-height: 1.3;
}

.vn-plan-heading h3 a {
    color: #fff !important;
    text-decoration: none !important;
}

.vn-plan-heading h3 a:hover {
    color: #ff6682 !important;
}

.vn-plan-stock {
    display: inline-block;
    margin-top: 9px;
    color: #8de1ae;
    font-size: 11px;
}

/* Pricing and order */

.vn-plan-order {
    margin-top: auto;
    padding-top: 23px;
}

.vn-plan-price {
    min-height: 43px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 5px;
    margin-bottom: 17px;
}

.vn-plan-price-caption {
    width: 100%;
    color: #9999a5;
    font-size: 10px;
}

.vn-plan-amount {
    color: #fff !important;
    font-size: 26px;
    font-weight: 950;
    letter-spacing: -1px;
}

.vn-plan-cycle {
    color: #9999a5;
    font-size: 10px;
}

.vn-universal-catalog a.vn-plan-button {
    min-height: 44px;
    width: 100%;
    display: flex !important;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px;
    border: 1px solid #ed345a !important;
    border-radius: 7px;
    background: linear-gradient(110deg,#ed2852,#a81439) !important;
    color: #fff !important;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 1px;
    text-decoration: none !important;
    transition: .2s;
}

.vn-universal-catalog a.vn-plan-button:hover {
    background: linear-gradient(110deg,#ff4168,#c51a43) !important;
    box-shadow: 0 5px 20px #e3264d35;
}

.vn-plan-details {
    display: block;
    margin-top: 13px;
    text-align: center;
    color: #99929d !important;
    font-size: 10px;
    text-decoration: none !important;
}

.vn-plan-details:hover {
    color: #ff6682 !important;
}

/* Tablet */

@media (min-width:768px) and (max-width:1050px) {
    .vn-plan-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 18px;
    }
}

/* Mobile swipe cards */

@media (max-width:767px) {
    .vn-universal-catalog {
        margin: 22px auto 55px;
        padding: 0 13px;
    }

    .vn-catalog-hero {
        min-height: 170px;
        margin-bottom: 30px;
        padding: 25px 15px;
    }

    .vn-catalog-hero h1 {
        font-size: 38px;
    }

    .vn-hero-symbol {
        right: -15px;
        font-size: 90px;
    }

    .vn-catalog-section-title h2 {
        font-size: 22px;
    }

    .vn-plan-grid {
        display: flex;
        gap: 15px;
        overflow-x: auto;
        overflow-y: hidden;
        padding: 5px 2px 18px;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 2px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: #713044 #17131a;
    }

    .vn-plan-card {
        flex: 0 0 82%;
        max-width: 340px;
        scroll-snap-align: start;
    }

    .vn-plan-art {
        height: 110px;
    }

    .vn-plan-content {
        padding: 19px;
    }

    .vn-plan-heading h3 {
        font-size: 21px;
    }

    .vn-plan-amount {
        font-size: 29px;
    }
}

/* Small mobile */

@media (max-width:380px) {
    .vn-plan-card {
        flex-basis: 88%;
    }

    .vn-catalog-hero h1 {
        font-size: 34px;
    }
}



/* VN PLAN DESCRIPTION */
.vn-universal-catalog .vn-plan-description {
    color: #aaa5b1;
    font-size: 13px;
    line-height: 1.75;
    margin: 0 0 20px;
    font-weight: 400;
}

.vn-universal-catalog .vn-plan-description p {
    margin: 0 0 6px;
}

.vn-universal-catalog .vn-plan-description ul,
.vn-universal-catalog .vn-plan-description ol {
    padding-left: 18px;
    margin: 6px 0;
}

.vn-universal-catalog .vn-plan-description li {
    margin-bottom: 4px;
}

.vn-universal-catalog .vn-plan-heading h3 {
    margin-top: 0;
}

/* VN PLAN NAME + PRICE INLINE LAYOUT */
.vn-universal-catalog .vn-plan-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 12px;
}

.vn-universal-catalog .vn-plan-heading {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
}

.vn-universal-catalog .vn-plan-heading h3 {
    margin: 0;
}

.vn-universal-catalog .vn-plan-description {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 0 20px;
}

.vn-universal-catalog .vn-plan-order {
    display: contents;
}

.vn-universal-catalog .vn-plan-price {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    align-self: center;
    white-space: nowrap;
    margin: 0;
}

.vn-universal-catalog .vn-plan-price .vn-plan-amount {
    color: #F02B60 !important;
    font-size: clamp(22px, 5vw, 30px);
    font-weight: 800;
}

.vn-universal-catalog .vn-plan-price .vn-plan-cycle,
.vn-universal-catalog .vn-plan-price .vn-plan-price-caption {
    color: #D58BA2;
    font-size: 11px;
}

.vn-universal-catalog .vn-plan-button {
    grid-column: 1 / -1;
    grid-row: 3;
    width: 100%;
}

@media (max-width: 380px) {
    .vn-universal-catalog .vn-plan-content {
        column-gap: 6px;
    }

    .vn-universal-catalog .vn-plan-heading h3 {
        font-size: 21px;
    }

    .vn-universal-catalog .vn-plan-price .vn-plan-amount {
        font-size: 21px;
    }
}



/* VN NAVBAR CURRENCY SELECTOR */
.vn-currency-trigger {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 46px;
    padding: 0 14px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 13px;
    background: #111014;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.vn-currency-trigger:hover,
.vn-currency-trigger:focus {
    border-color: #e91e56;
    background: #1a1017;
    color: #fff;
    outline: none;
}

.vn-currency-trigger > i:first-child {
    color: #ed245b;
}

.vn-currency-chevron {
    font-size: 10px;
    color: #ed245b;
}

.vn-currency-desktop {
    display: inline-flex;
}

.vn-currency-mobile {
    display: none;
    width: 100%;
    min-height: 50px;
    justify-content: flex-start;
    margin: 14px 0;
    padding: 0 17px;
    border-radius: 12px;
    color: #fff;
}

@media (max-width: 1100px) {
    .vn-currency-desktop {
        display: none !important;
    }

    .vn-currency-mobile {
        display: inline-flex !important;
    }
}

@media (min-width: 1101px) {
    .vn-currency-mobile {
        display: none !important;
    }
}

/* =====================================================
   VAMPIRE NODES - WHMCS SUPPORT PAGES DARK THEME
   Announcements, Status, Tickets, KB, Login
   ===================================================== */

:root {
    --vn-support-bg: #08080b;
    --vn-support-card: #121116;
    --vn-support-surface: #19171e;
    --vn-support-border: #302a35;
    --vn-support-text: #f4f1f5;
    --vn-support-muted: #aaa4b0;
    --vn-support-red: #ed245b;
}

/* Main WHMCS content panels */
#main-body .card,
#main-body .panel,
#main-body .well,
#main-body .kb-category,
#main-body .announcement,
#main-body .ticket-reply,
#main-body .support-ticket-reply {
    background: var(--vn-support-card) !important;
    color: var(--vn-support-text) !important;
    border: 1px solid var(--vn-support-border) !important;
    border-radius: 13px !important;
    box-shadow: none !important;
}

#main-body .card-header,
#main-body .card-footer,
#main-body .panel-heading,
#main-body .panel-footer {
    background: var(--vn-support-surface) !important;
    color: var(--vn-support-text) !important;
    border-color: var(--vn-support-border) !important;
}

#main-body .card-body,
#main-body .panel-body {
    color: var(--vn-support-text);
}

/* Headings and readable text */
#main-body h1,
#main-body h2,
#main-body h3,
#main-body h4,
#main-body h5,
#main-body .card-title {
    color: #fff !important;
}

#main-body p,
#main-body li,
#main-body label,
#main-body .text-muted,
#main-body small {
    color: var(--vn-support-muted);
}

#main-body a:not(.btn):not(.page-link) {
    color: #f05a82;
}

#main-body a:not(.btn):not(.page-link):hover {
    color: #ff8aa9;
}

/* Form fields, search boxes and dropdowns */
#main-body input.form-control,
#main-body textarea.form-control,
#main-body select.form-control,
#main-body .custom-select,
#main-body .input-group-text,
#main-body .form-control {
    background-color: #19171e !important;
    color: #f5f2f6 !important;
    border: 1px solid #39323e !important;
    border-radius: 8px;
}

#main-body input.form-control::placeholder,
#main-body textarea.form-control::placeholder {
    color: #88818e !important;
    opacity: 1;
}

#main-body select option {
    background: #19171e;
    color: #fff;
}

#main-body .form-control:focus {
    border-color: var(--vn-support-red) !important;
    box-shadow: 0 0 0 2px rgba(237,36,91,.14) !important;
}

/* Buttons */
#main-body .btn-primary,
#main-body button.btn-primary {
    background: linear-gradient(110deg, #ed245b, #a90e40) !important;
    border-color: #ed245b !important;
    color: #fff !important;
}

#main-body .btn-default,
#main-body .btn-secondary,
#main-body .btn-light {
    background: #201b25 !important;
    border-color: #403544 !important;
    color: #f4f1f5 !important;
}

#main-body .btn:hover {
    filter: brightness(1.12);
}

/* Tables and ticket lists */
#main-body table,
#main-body .table,
#main-body .table-responsive {
    color: var(--vn-support-text) !important;
}

#main-body .table thead th,
#main-body .table th {
    background: #1b1720 !important;
    color: #e9e3eb !important;
    border-color: var(--vn-support-border) !important;
}

#main-body .table td,
#main-body .table tbody th {
    background: #121116 !important;
    color: #d7d1da !important;
    border-color: var(--vn-support-border) !important;
}

#main-body .table-striped tbody tr:nth-of-type(odd) {
    background: #17141b !important;
}

/* Pagination */
#main-body .pagination .page-link,
#main-body .page-item .page-link {
    background: #19171e !important;
    color: #eee8f0 !important;
    border-color: var(--vn-support-border) !important;
}

#main-body .pagination .active .page-link {
    background: var(--vn-support-red) !important;
    color: #fff !important;
    border-color: var(--vn-support-red) !important;
}

/* Knowledgebase */
#main-body .kb-category,
#main-body .kb-article-item,
#main-body .list-group-item {
    background: var(--vn-support-card) !important;
    color: var(--vn-support-text) !important;
    border-color: var(--vn-support-border) !important;
}

#main-body .kb-category:hover,
#main-body .kb-article-item:hover,
#main-body .list-group-item:hover {
    background: #211721 !important;
}

/* Announcements */
#main-body .announcements .announcement {
    padding: 22px;
    margin-bottom: 20px;
}

#main-body .announcement article {
    color: #d0cad4;
    line-height: 1.8;
}

#main-body .announcement h1 a {
    color: #fff !important;
}

#main-body .announcement .list-inline {
    color: var(--vn-support-muted);
}

/* Login and authentication */
#main-body .login-form .card {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
}

#main-body .form-control-label,
#main-body .login-form label {
    color: #e7e0e9 !important;
}

#main-body .input-group-prepend .input-group-text,
#main-body .input-group-append .input-group-text {
    background: #211c26 !important;
    color: #e9e1eb !important;
    border-color: #39323e !important;
}

/* Status alerts: retain their semantic status colours */
#main-body .alert-success {
    background: rgba(31,135,76,.17) !important;
    color: #8de2ae !important;
    border: 1px solid rgba(70,190,120,.35) !important;
}

#main-body .alert-info {
    background: rgba(40,130,160,.17) !important;
    color: #9bdcf0 !important;
    border: 1px solid rgba(70,170,200,.3) !important;
}

#main-body .alert-warning {
    background: rgba(180,120,30,.16) !important;
    color: #ffd18a !important;
    border: 1px solid rgba(200,145,50,.3) !important;
}

#main-body .alert-danger {
    background: rgba(190,35,75,.15) !important;
    color: #ff9bb4 !important;
    border: 1px solid rgba(237,36,91,.35) !important;
}

/* Responsive tables */
#main-body .table-responsive {
    border-color: var(--vn-support-border) !important;
}

@media (max-width: 767px) {
    #main-body .announcement {
        padding: 16px !important;
    }

    #main-body .card-body {
        padding: 18px !important;
    }

    #main-body .table {
        font-size: 13px;
    }

    #main-body .pagination {
        flex-wrap: wrap;
    }
}

/* End Vampire Nodes support dark theme */

/* ==========================================================
   VAMPIRE NODES - PREMIUM CART REDESIGN
   ========================================================== */

#order-standard_cart .cart-body {
    width: 100%;
}

#order-standard_cart .header-lined h1 {
    color: #fff !important;
    font-size: clamp(28px, 5vw, 40px);
    font-weight: 800;
    letter-spacing: -1.2px;
    margin-bottom: 28px;
}

/* Cart layout */
#order-standard_cart .secondary-cart-body,
#order-standard_cart .secondary-cart-sidebar {
    min-width: 0;
}

/* Cart column heading */
#order-standard_cart .view-cart-items-header {
    background: linear-gradient(110deg, #9e123c, #e91e55) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 50, 105, .5) !important;
    border-radius: 12px 12px 0 0;
    padding: 17px 20px;
    font-weight: 750;
    letter-spacing: .3px;
}

/* Cart product list */
#order-standard_cart .view-cart-items {
    background: transparent !important;
    border: 0 !important;
}

#order-standard_cart .view-cart-items .item {
    background: #111015 !important;
    border: 1px solid #30232e !important;
    border-radius: 13px;
    margin: 12px 0;
    padding: 21px 18px;
    color: #eeeaf0 !important;
    transition: border-color .2s ease, transform .2s ease;
}

#order-standard_cart .view-cart-items .item:hover {
    border-color: rgba(235, 35, 91, .65) !important;
}

#order-standard_cart .view-cart-items .item-title {
    display: block;
    color: #fff !important;
    font-size: 18px;
    font-weight: 750;
    margin-bottom: 7px;
}

#order-standard_cart .view-cart-items .item-group,
#order-standard_cart .view-cart-items .item-domain {
    display: block;
    color: #aaa2af !important;
    font-size: 13px;
    margin-top: 5px;
}

#order-standard_cart .view-cart-items small {
    display: block;
    color: #c7bdca !important;
    line-height: 1.9;
    margin-top: 12px;
}

#order-standard_cart .view-cart-items .item-price {
    color: #f02c62 !important;
    font-size: 18px;
    font-weight: 800;
    text-align: right;
    padding-top: 5px;
}

#order-standard_cart .view-cart-items .item-price .cycle {
    display: block;
    color: #aaa2af !important;
    font-size: 12px;
    font-weight: 500;
    margin-top: 5px;
}

/* Edit and remove */
#order-standard_cart .view-cart-items .btn-link {
    color: #ed4775 !important;
    text-decoration: none !important;
    font-weight: 650;
}

#order-standard_cart .view-cart-items .btn-remove-from-cart {
    color: #e46a83 !important;
}

#order-standard_cart .view-cart-items .btn-link:hover {
    color: #ff8aa8 !important;
}

/* Quantity fields */
#order-standard_cart .view-cart-items input.form-control {
    background: #1a1720 !important;
    color: #fff !important;
    border: 1px solid #45303e !important;
    border-radius: 9px;
}

/* Empty cart */
#order-standard_cart .view-cart-empty {
    background: #111015 !important;
    color: #aaa2af !important;
    border: 1px dashed #49303d !important;
    border-radius: 12px;
    padding: 35px 20px;
    text-align: center;
}

#order-standard_cart .empty-cart {
    text-align: right;
    margin: 14px 0 24px;
}

#order-standard_cart #btnEmptyCart {
    color: #ef6689 !important;
    font-weight: 650;
}

/* Promo code panel */
#order-standard_cart .view-cart-tabs {
    background: #111015 !important;
    border: 1px solid #30232e !important;
    border-radius: 14px;
    padding: 18px;
    margin-top: 24px;
}

#order-standard_cart .view-cart-tabs .nav-tabs {
    border-bottom: 1px solid #382632 !important;
}

#order-standard_cart .view-cart-tabs .nav-link {
    background: transparent !important;
    color: #aaa2af !important;
    border: 0 !important;
    padding: 12px 16px;
}

#order-standard_cart .view-cart-tabs .nav-link.active {
    color: #ff668e !important;
    border-bottom: 2px solid #ed2459 !important;
    font-weight: 750;
}

#order-standard_cart .view-cart-tabs .tab-content {
    padding-top: 20px;
}

#order-standard_cart .view-cart-tabs input.form-control,
#order-standard_cart .view-cart-tabs select.form-control {
    background: #1a1720 !important;
    border: 1px solid #49303e !important;
    border-radius: 10px !important;
    color: #fff !important;
    min-height: 52px;
    box-shadow: none !important;
}

#order-standard_cart .view-cart-tabs input::placeholder {
    color: #938a98 !important;
}

#order-standard_cart .view-cart-tabs .field-icon {
    color: #ed4775 !important;
}

#order-standard_cart .view-cart-tabs button[type="submit"] {
    background: linear-gradient(110deg, #ee285e, #a9103e) !important;
    color: #fff !important;
    border: 1px solid #f34b78 !important;
    border-radius: 10px !important;
    padding: 14px 18px;
    font-weight: 800;
    letter-spacing: .7px;
    min-height: 49px;
}

/* Order summary */
#order-standard_cart .order-summary {
    background: #111015 !important;
    border: 1px solid #49303e !important;
    border-radius: 15px !important;
    padding: 22px !important;
    color: #e8e2eb !important;
    box-shadow: 0 15px 40px rgba(0, 0, 0, .25);
}

#order-standard_cart .order-summary h2 {
    color: #fff !important;
    font-size: 23px;
    font-weight: 800;
    margin-bottom: 22px;
}

#order-standard_cart .order-summary .summary-container {
    color: #c8bfca !important;
}

#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .bordered-totals,
#order-standard_cart .order-summary .recurring-totals {
    border-color: #382632 !important;
    padding: 12px 0;
}

#order-standard_cart .order-summary .total-due-today {
    background: rgba(220, 25, 75, .10) !important;
    border: 1px solid rgba(235, 40, 90, .35) !important;
    border-radius: 11px;
    padding: 18px;
    margin: 18px 0;
    color: #fff !important;
}

#order-standard_cart .order-summary .total-due-today .amt {
    color: #ff4779 !important;
    font-size: 27px;
    font-weight: 850;
}

/* Checkout and continue shopping */
#order-standard_cart .btn-checkout,
#order-standard_cart a#checkout {
    display: block;
    width: 100%;
    background: linear-gradient(110deg, #f02760, #a9103e) !important;
    color: #fff !important;
    border: 1px solid #f64b7c !important;
    border-radius: 11px !important;
    padding: 15px 18px !important;
    font-size: 15px;
    font-weight: 850;
    letter-spacing: .8px;
    text-align: center;
    text-decoration: none !important;
    box-shadow: 0 8px 22px rgba(225, 25, 78, .16);
}

#order-standard_cart .btn-checkout:hover {
    filter: brightness(1.12);
    transform: translateY(-1px);
}

#order-standard_cart .btn-continue-shopping {
    display: inline-block;
    color: #ed668b !important;
    margin-top: 13px;
    text-decoration: none !important;
}

/* Sidebar and actions */
#order-standard_cart .cart-sidebar .panel,
#order-standard_cart .cart-sidebar .card,
#order-standard_cart .cart-sidebar .list-group {
    background: #111015 !important;
    border-color: #30232e !important;
    color: #eee !important;
}

#order-standard_cart .cart-sidebar a {
    color: #d9cbd7 !important;
}

#order-standard_cart .cart-sidebar select,
#order-standard_cart .cart-sidebar .form-control {
    background-color: #1a1720 !important;
    color: #fff !important;
    border: 1px solid #49303e !important;
}

/* Alerts */
#order-standard_cart .alert {
    border-radius: 11px !important;
}

/* Express payment buttons */
#order-standard_cart .express-checkout-buttons {
    margin: 15px 0;
}

#order-standard_cart .view-cart-gateway-checkout {
    background: #111015 !important;
    border: 1px solid #30232e !important;
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
}

/* Mobile cart */
@media (max-width: 767px) {
    #order-standard_cart .cart-body {
        padding-left: 0;
        padding-right: 0;
    }

    #order-standard_cart .view-cart-items-header {
        padding: 14px 12px;
        font-size: 13px;
    }

    #order-standard_cart .view-cart-items .item {
        padding: 17px 13px;
        margin: 12px 0;
    }

    #order-standard_cart .view-cart-items .item-title {
        font-size: 16px;
    }

    #order-standard_cart .view-cart-items .item-price {
        text-align: left;
        padding-top: 15px;
        font-size: 17px;
    }

    #order-standard_cart .view-cart-items .item .row {
        row-gap: 8px;
    }

    #order-standard_cart .order-summary {
        margin-top: 22px;
        padding: 18px !important;
    }

    #order-standard_cart .view-cart-tabs {
        padding: 14px;
    }

    #order-standard_cart .btn-checkout,
    #order-standard_cart a#checkout {
        min-height: 54px;
    }
}


/* ==========================================================
   VN CART V2 - CLEAN CONVERSION-FOCUSED CHECKOUT
   ========================================================== */

/* Full-width cart after removing category sidebar */
#order-standard_cart .cart-body {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
}

#order-standard_cart .cart-sidebar {
    display: none !important;
}

/* Remove inherited white surfaces */
#order-standard_cart .view-cart-tabs,
#order-standard_cart .view-cart-tabs .tab-content,
#order-standard_cart .view-cart-tabs .tab-pane,
#order-standard_cart .order-summary,
#order-standard_cart .order-summary .summary-container,
#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .bordered-totals,
#order-standard_cart .order-summary .recurring-totals {
    background: #111015 !important;
    color: #e8e2eb !important;
}

/* Consistent dark cart panels */
#order-standard_cart .view-cart-tabs,
#order-standard_cart .order-summary {
    border: 1px solid #382633 !important;
    border-radius: 16px !important;
    overflow: hidden;
}

/* Promo panel spacing */
#order-standard_cart .view-cart-tabs {
    padding: 20px !important;
}

#order-standard_cart .view-cart-tabs .tab-content {
    padding: 20px 0 0 !important;
}

#order-standard_cart .view-cart-tabs .form-group {
    margin-bottom: 12px;
}

#order-standard_cart .view-cart-tabs input.form-control {
    background: #1b1720 !important;
    color: #fff !important;
    border: 1px solid #49303e !important;
    min-height: 56px;
    padding: 14px 17px;
}

#order-standard_cart .view-cart-tabs button[type="submit"] {
    min-height: 54px;
    font-size: 15px;
    letter-spacing: .4px;
    box-shadow: 0 8px 22px rgba(230, 25, 80, .18);
}

/* Summary hierarchy */
#order-standard_cart .order-summary {
    padding: 24px !important;
}

#order-standard_cart .order-summary h2 {
    text-align: left;
    font-size: 24px !important;
    letter-spacing: -.5px;
}

#order-standard_cart .order-summary .subtotal,
#order-standard_cart .order-summary .bordered-totals,
#order-standard_cart .order-summary .recurring-totals {
    color: #c5bac8 !important;
    border-color: #382633 !important;
}

#order-standard_cart .order-summary .total-due-today {
    background: linear-gradient(120deg, rgba(225, 25, 75, .15), rgba(110, 10, 48, .12)) !important;
    border: 1px solid rgba(238, 55, 105, .4) !important;
    border-radius: 14px !important;
    text-align: left;
    padding: 22px !important;
}

#order-standard_cart .order-summary .total-due-today .amt {
    display: block;
    color: #ff4779 !important;
    font-size: clamp(25px, 5vw, 34px) !important;
    line-height: 1.25;
    margin-bottom: 7px;
}

#order-standard_cart .order-summary .total-due-today > span:last-child {
    color: #c7b9c5 !important;
    font-size: 13px;
}

/* Checkout button */
#order-standard_cart a#checkout {
    min-height: 58px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius: 12px !important;
    font-size: 16px !important;
    box-shadow: 0 10px 28px rgba(225, 25, 78, .22);
}

#order-standard_cart a#checkout.disabled {
    opacity: .45;
    pointer-events: none;
}

#order-standard_cart .btn-continue-shopping {
    color: #b9aab8 !important;
    font-size: 13px;
}

#order-standard_cart .btn-continue-shopping:hover {
    color: #ff668e !important;
}

/* Product cards: consistent spacing */
#order-standard_cart .view-cart-items .item {
    background: linear-gradient(145deg, #151219, #100e14) !important;
    border: 1px solid #332431 !important;
    border-radius: 14px !important;
    margin: 12px 0 !important;
    padding: 21px !important;
}

#order-standard_cart .view-cart-items .item:hover {
    border-color: rgba(238, 55, 105, .65) !important;
}

/* Hide category/action remnants if parent theme injects them */
#order-standard_cart .cart-sidebar,
#order-standard_cart .sidebar-categories,
#order-standard_cart .sidebar-categories-collapsed {
    display: none !important;
}

/* Mobile refinements */
@media (max-width: 767px) {
    #order-standard_cart .header-lined {
        margin-bottom: 20px;
    }

    #order-standard_cart .view-cart-tabs {
        padding: 15px !important;
        margin-top: 20px;
    }

    #order-standard_cart .view-cart-tabs .tab-content {
        padding-top: 16px !important;
    }

    #order-standard_cart .order-summary {
        padding: 18px !important;
        margin-top: 20px;
    }

    #order-standard_cart .order-summary h2 {
        font-size: 22px !important;
    }

    #order-standard_cart .order-summary .total-due-today {
        padding: 18px !important;
    }

    #order-standard_cart .view-cart-items .item {
        padding: 17px !important;
    }

    #order-standard_cart .view-cart-items .item-price {
        text-align: left !important;
    }
}




/* VN GLOBAL PREMIUM GLASSMORPHISM V1
   Dark obsidian surfaces, subtle crimson reflections and depth.
*/

/* Global atmospheric background */
body {
    background-color: #070609 !important;
    background-image:
        radial-gradient(ellipse at 12% 8%, rgba(190, 20, 67, .10), transparent 38%),
        radial-gradient(ellipse at 88% 35%, rgba(103, 27, 100, .07), transparent 35%) !important;
    background-attachment: fixed;
}

/* Main glass surfaces */
#main-body .card,
#main-body .panel,
#main-body .well,
#main-body .client-home-panels .panel,
#main-body .list-group,
#main-body .kb-category,
#main-body .announcement,
#main-body .ticket-reply,
#main-body .invoice-container,
#order-standard_cart .view-cart-tabs,
#order-standard_cart .order-summary,
#order-standard_cart .view-cart-items .item,
.modal-content,
.dropdown-menu {
    background: linear-gradient(
        135deg,
        rgba(29, 24, 34, .84),
        rgba(13, 12, 18, .91)
    ) !important;
    border: 1px solid rgba(255, 255, 255, .085) !important;
    box-shadow:
        0 12px 35px rgba(0, 0, 0, .22),
        inset 0 1px 0 rgba(255, 255, 255, .055),
        0 0 22px rgba(191, 20, 69, .035) !important;
    -webkit-backdrop-filter: blur(18px) saturate(135%);
    backdrop-filter: blur(18px) saturate(135%);
    border-radius: 15px;
}

/* Client area panel headers */
#main-body .panel-heading,
#main-body .card-header {
    background: linear-gradient(
        110deg,
        rgba(190, 20, 67, .15),
        rgba(35, 25, 39, .72)
    ) !important;
    color: #fff !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}

/* Dashboard cards hover depth */
#main-body .client-home-panels .panel,
#main-body .card,
#main-body .kb-category {
    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

#main-body .client-home-panels .panel:hover,
#main-body .kb-category:hover {
    transform: translateY(-3px);
    border-color: rgba(239, 43, 100, .38) !important;
    box-shadow:
        0 16px 40px rgba(0, 0, 0, .32),
        0 0 24px rgba(218, 25, 79, .09) !important;
}

/* Form controls */
#main-body input.form-control,
#main-body select.form-control,
#main-body textarea.form-control,
#order-standard_cart input.form-control,
#order-standard_cart select.form-control,
#order-standard_cart textarea.form-control {
    background: rgba(24, 20, 29, .88) !important;
    color: #f5f1f5 !important;
    border: 1px solid rgba(255, 255, 255, .12) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 5px rgba(0, 0, 0, .2) !important;
    transition: border-color .2s ease, box-shadow .2s ease;
}

#main-body input.form-control:focus,
#main-body select.form-control:focus,
#main-body textarea.form-control:focus {
    border-color: rgba(239, 43, 100, .72) !important;
    box-shadow: 0 0 0 3px rgba(239, 43, 100, .12) !important;
    outline: none !important;
}

/* Tables */
#main-body table.table {
    background: rgba(18, 15, 22, .78) !important;
    border: 1px solid rgba(255, 255, 255, .08) !important;
    border-radius: 13px !important;
    overflow: hidden;
}

#main-body table.table th {
    background: rgba(190, 20, 67, .13) !important;
    color: #f4dce5 !important;
}

#main-body table.table td {
    background: rgba(19, 16, 23, .62) !important;
    color: #ded5df !important;
    border-color: rgba(255, 255, 255, .055) !important;
}

#main-body table.table tbody tr:hover td {
    background: rgba(190, 20, 67, .09) !important;
}

/* Navigation tabs and list rows */
#main-body .nav-tabs {
    border-bottom-color: rgba(255, 255, 255, .10) !important;
}

#main-body .nav-tabs .nav-link.active,
#main-body .list-group-item {
    background: rgba(29, 23, 34, .82) !important;
    color: #f5edf4 !important;
    border-color: rgba(255, 255, 255, .075) !important;
}

#main-body .list-group-item:hover {
    background: rgba(190, 20, 67, .12) !important;
}

/* Modals and dropdowns */
.modal-content {
    color: #f5edf4 !important;
}

.modal-header,
.modal-footer {
    border-color: rgba(255, 255, 255, .08) !important;
}

.dropdown-menu .dropdown-item {
    color: #eee5ef !important;
}

.dropdown-menu .dropdown-item:hover {
    background: rgba(190, 20, 67, .15) !important;
    color: #fff !important;
}

/* Alerts: retain semantic status colours, soften the surfaces */
#main-body .alert {
    border-radius: 12px !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

/* Buttons */
#main-body .btn,
#order-standard_cart .btn {
    border-radius: 10px;
    transition: transform .2s ease, box-shadow .2s ease;
}

#main-body .btn-primary,
#order-standard_cart .btn-primary {
    box-shadow: 0 7px 22px rgba(210, 20, 75, .17);
}

#main-body .btn-primary:hover,
#order-standard_cart .btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 27px rgba(210, 20, 75, .27);
}

/* Typography */
#main-body .card-title,
#main-body .panel-title,
#main-body h1,
#main-body h2,
#main-body h3,
#main-body h4 {
    color: #faf7fb;
}

/* Subtle separators */
#main-body hr {
    border-color: rgba(255, 255, 255, .09) !important;
}

/* Mobile: lighter blur for smoother scrolling */
@media (max-width: 767px) {
    #main-body .card,
    #main-body .panel,
    #main-body .kb-category,
    #main-body .list-group,
    .modal-content {
        -webkit-backdrop-filter: blur(11px);
        backdrop-filter: blur(11px);
    }

    #main-body .client-home-panels .panel:hover,
    #main-body .kb-category:hover {
        transform: none;
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    #main-body .card,
    #main-body .panel,
    #main-body .kb-category,
    #main-body .btn {
        transition: none !important;
    }
}


    
/* VN OFFICIAL LOGO - GLOBAL BRANDING */
.vn-brand {
    display: inline-flex !important;
    align-items: center !important;
    flex-shrink: 0;
}

.vn-logo-image {
    display: block;
    width: 100%;
    max-width: 255px;
    max-height: 65px;
    height: auto;
    object-fit: contain;
}

.vn-footer-logo-image {
    display: block;
    width: auto;
    max-width: 225px;
    max-height: 58px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 767px) {
    .vn-logo-image {
        max-width: 205px;
        max-height: 54px;
    }
}

@media (max-width: 380px) {
    .vn-logo-image {
        max-width: 170px;
    }
}

/* VN LOGO + WORDMARK BRANDING */
.vn-brand {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.vn-logo-image {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    object-fit: contain;
}

.vn-brand-name {
    font-size: 21px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    white-space: nowrap;
    color: #fff !important;
}

.vn-brand-name b,
.vn-footer-wordmark b {
    color: #ed174f !important;
}

.vn-footer-logo {
    display: inline-flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.vn-footer-logo-image {
    width: 46px !important;
    height: 46px !important;
    max-width: 46px !important;
    max-height: 46px !important;
    object-fit: contain;
}

.vn-footer-wordmark {
    color: #fff !important;
    font-size: 21px !important;
    font-weight: 800 !important;
    letter-spacing: 1px !important;
    white-space: nowrap;
}

@media (max-width: 767px) {
    .vn-logo-image {
        width: 42px !important;
        height: 42px !important;
    }

    .vn-brand-name {
        font-size: 17px !important;
        letter-spacing: .6px !important;
    }

    .vn-brand {
        gap: 9px !important;
    }

    .vn-footer-wordmark {
        font-size: 19px !important;
    }
}


/* =========================================================
   VN CUSTOM CLIENT PORTAL DASHBOARD
   ========================================================= */
.vn-portal {
    --vn-portal-bg: rgba(17, 15, 22, .82);
    --vn-portal-border: rgba(255,255,255,.09);
    --vn-portal-muted: #a6a1ae;
    --vn-portal-accent: #ed245d;
    color: #f7f5f8;
    padding: 12px 0 40px;
}
.vn-portal-welcome {
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    padding:30px;border:1px solid var(--vn-portal-border);border-radius:20px;
    background:radial-gradient(ellipse at 90% 0%,rgba(237,36,93,.16),transparent 48%),var(--vn-portal-bg);
    backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
    margin-bottom:22px;
}
.vn-portal-eyebrow {display:block;color:var(--vn-portal-accent);font-size:11px;font-weight:800;letter-spacing:2px;margin-bottom:9px}
.vn-portal-welcome h1 {color:#fff;font-size:clamp(25px,4vw,36px);font-weight:800;margin:0 0 8px}
.vn-portal-welcome p {color:var(--vn-portal-muted);margin:0}
.vn-portal-primary {
    display:inline-flex;align-items:center;gap:9px;padding:13px 18px;border-radius:11px;
    color:#fff!important;font-weight:700;text-decoration:none!important;
    background:linear-gradient(110deg,#f02b68,#a90e43);box-shadow:0 8px 25px rgba(237,36,93,.2);
    white-space:nowrap;
}
.vn-portal-stats {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:15px;margin-bottom:20px}
.vn-portal-stat {
    position:relative;display:flex;flex-direction:column;min-height:170px;padding:21px;
    border:1px solid var(--vn-portal-border);border-radius:17px;
    background:linear-gradient(145deg,rgba(255,255,255,.065),rgba(255,255,255,.018)),var(--vn-portal-bg);
    backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
    text-decoration:none!important;transition:transform .2s,border-color .2s;
}
.vn-portal-stat:hover {transform:translateY(-3px);border-color:rgba(237,36,93,.5)}
.vn-stat-icon {color:var(--vn-portal-accent);font-size:20px;margin-bottom:14px}
.vn-stat-number {font-size:34px;line-height:1.1;font-weight:800;color:#fff}
.vn-stat-label {color:var(--vn-portal-muted);font-size:13px;font-weight:700;margin-top:5px}
.vn-stat-link {margin-top:auto;padding-top:15px;color:#ed6b91;font-size:12px}
.vn-stat-link i {margin-left:5px}
.vn-portal-quick {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px;margin-bottom:34px}
.vn-quick-action {
    display:flex;align-items:center;gap:13px;padding:17px;border-radius:15px;
    border:1px solid var(--vn-portal-border);background:rgba(255,255,255,.035);
    color:#fff!important;text-decoration:none!important;min-width:0;
}
.vn-quick-action>i:first-child {color:var(--vn-portal-accent);font-size:20px}
.vn-quick-action>span {display:flex;flex-direction:column;min-width:0;flex:1}
.vn-quick-action strong {font-size:13px}
.vn-quick-action small {color:var(--vn-portal-muted);font-size:11px;margin-top:4px}
.vn-quick-action>i:last-child {color:var(--vn-portal-muted);font-size:12px}
.vn-portal-section-heading {margin:0 0 15px}
.vn-portal-section-heading h2 {font-size:23px;font-weight:800;color:#fff;margin:0}
.vn-portal-panels {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.vn-portal-panel {
    min-width:0;overflow:hidden;border:1px solid var(--vn-portal-border);border-radius:16px;
    background:var(--vn-portal-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
}
.vn-portal-panel-heading {
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    padding:17px 19px;border-bottom:1px solid var(--vn-portal-border);
    background:linear-gradient(100deg,rgba(237,36,93,.13),rgba(255,255,255,.025));
}
.vn-portal-panel-heading h3 {display:flex;align-items:center;gap:10px;color:#fff;font-size:15px;font-weight:750;margin:0}
.vn-portal-panel-heading h3>i {color:var(--vn-portal-accent)}
.vn-panel-action {color:#f0789b!important;font-size:12px;font-weight:700}
.vn-portal-panel-body {padding:19px;color:#d7d2dc}
.vn-portal-panel-links {display:flex;flex-direction:column}
.vn-portal-panel-links>a,.vn-portal-panel-label {
    display:flex;align-items:center;gap:11px;padding:13px 18px;
    color:#d7d2dc!important;text-decoration:none!important;border-bottom:1px solid rgba(255,255,255,.055);
    font-size:13px;
}
.vn-portal-panel-links>a:hover,.vn-portal-panel-links>a.active {background:rgba(237,36,93,.08);color:#fff!important}
.vn-portal-panel-links>a>i:first-child,.vn-portal-panel-label>i {color:var(--vn-portal-accent)}
.vn-portal-panel-links>a>span:first-of-type {flex:1}
.vn-panel-chevron {font-size:10px;color:#777}
.vn-portal-badge {margin-left:auto;padding:3px 8px;border-radius:20px;background:rgba(237,36,93,.16);color:#ff7da2;font-size:11px}
.vn-portal-panel-footer {padding:12px 18px;border-top:1px solid var(--vn-portal-border)}
.vn-portal-addon {margin-bottom:16px}
.vn-portal .alert {border-radius:12px}

@media(max-width:991px) {
    .vn-portal-stats {grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:767px) {
    .vn-portal {padding-top:5px}
    .vn-portal-welcome {align-items:flex-start;flex-direction:column;padding:22px}
    .vn-portal-primary {width:100%;justify-content:center}
    .vn-portal-quick {grid-template-columns:1fr}
    .vn-portal-panels {grid-template-columns:1fr}
    .vn-portal-stat {min-height:150px;padding:17px}
    .vn-stat-number {font-size:29px}
}

/* =========================================================
   VN CUSTOM CLIENT SIDEBAR
   ========================================================= */
.vn-client-sidebar {
    margin-bottom:18px;
    overflow:hidden;
    border:1px solid rgba(255,255,255,.09);
    border-radius:15px;
    background:linear-gradient(145deg,rgba(255,255,255,.055),rgba(255,255,255,.015)),rgba(17,15,22,.88);
    box-shadow:0 12px 30px rgba(0,0,0,.12);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
}
.vn-client-sidebar-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 17px;
    border-bottom:1px solid rgba(255,255,255,.07);
    background:linear-gradient(100deg,rgba(237,36,93,.12),rgba(255,255,255,.015));
}
.vn-client-sidebar-title {
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
    color:#fff;
    font-size:14px;
    font-weight:750;
}
.vn-client-sidebar-title>i {color:#ed245d}
.vn-sidebar-chevron {color:#8f8995;font-size:11px}
.vn-client-sidebar-links {display:flex;flex-direction:column;padding:7px}
.vn-client-sidebar-links>a {
    display:flex;
    align-items:center;
    gap:11px;
    min-height:43px;
    padding:10px 11px;
    border:1px solid transparent;
    border-radius:9px;
    color:#c6c0cc!important;
    font-size:13px;
    text-decoration:none!important;
    transition:background .18s,border-color .18s,color .18s;
}
.vn-client-sidebar-links>a:hover {
    color:#fff!important;
    background:rgba(255,255,255,.045);
}
.vn-client-sidebar-links>a.active {
    color:#fff!important;
    border-color:rgba(237,36,93,.2);
    background:linear-gradient(90deg,rgba(237,36,93,.19),rgba(237,36,93,.045));
}
.vn-sidebar-link-icon {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    color:#ed5b86;
    font-size:14px;
}
.vn-sidebar-link-label {flex:1;min-width:0}
.vn-sidebar-link-arrow {font-size:9px;color:#777}
.vn-client-sidebar-label {
    display:flex;
    align-items:center;
    gap:10px;
    padding:11px;
    color:#99929f;
    font-size:12px;
    font-weight:700;
}
.vn-client-sidebar-label>i {color:#ed5b86}
.vn-client-sidebar-body,.vn-client-sidebar-footer {padding:13px 16px;color:#c6c0cc}
.vn-client-sidebar-footer {border-top:1px solid rgba(255,255,255,.07)}
.vn-client-sidebar-mobile {display:none}
.vn-client-sidebar .form-control {
    color:#fff!important;
    background:#17141d!important;
    border:1px solid rgba(255,255,255,.13)!important;
    border-radius:9px!important;
}
@media(max-width:767px) {
    .vn-client-sidebar {border-radius:13px}
    .vn-client-sidebar-heading {padding:14px}
    .vn-client-sidebar-links>a {min-height:46px}
}

/* =========================================================
   VN CLIENT SIDEBAR POLISH V2
   ========================================================= */

.vn-client-sidebar {
    border-color: rgba(255,255,255,.085);
    border-radius: 17px;
    box-shadow: 0 15px 38px rgba(0,0,0,.2);
}

.vn-client-sidebar-heading {
    min-height: 54px;
    background:
        radial-gradient(ellipse at 0% 50%,rgba(237,36,93,.13),transparent 65%),
        rgba(255,255,255,.015);
}

.vn-client-sidebar-title {
    letter-spacing: .15px;
}

.vn-client-sidebar-links {
    gap: 3px;
    padding: 9px;
}

.vn-client-sidebar-links > a {
    position: relative;
    min-height: 45px;
    border-radius: 10px;
}

.vn-client-sidebar-links > a:hover {
    border-color: rgba(237,36,93,.13);
    background: rgba(237,36,93,.065);
    transform: translateX(2px);
}

.vn-client-sidebar-links > a.active {
    border-color: rgba(237,36,93,.28);
    background: linear-gradient(100deg,rgba(237,36,93,.2),rgba(237,36,93,.045));
    box-shadow: inset 3px 0 0 #ed245d;
}

.vn-client-sidebar-links > a.active .vn-sidebar-link-icon {
    color: #ff7da2;
}

.vn-sidebar-link-icon {
    flex: 0 0 20px;
    transition: color .18s ease;
}

.vn-sidebar-link-arrow {
    transition: transform .18s ease,color .18s ease;
}

.vn-client-sidebar-links > a:hover .vn-sidebar-link-arrow {
    color: #ff7da2;
    transform: translateX(2px);
}

.vn-portal-badge {
    border: 1px solid rgba(237,36,93,.18);
    font-weight: 700;
    line-height: 1.3;
}

.vn-client-sidebar-label {
    letter-spacing: .35px;
    text-transform: uppercase;
}

.vn-client-sidebar a:focus-visible,
.vn-client-sidebar select:focus-visible {
    outline: 2px solid #ed245d;
    outline-offset: 3px;
}

.vn-client-sidebar .form-control {
    min-height: 44px;
}

@media (min-width: 768px) {
    .vn-client-sidebar-mobile {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .vn-client-sidebar-mobile {
        display: block !important;
        margin-top: 0;
    }

    .vn-client-sidebar.d-none.d-md-block {
        display: none !important;
    }

    .vn-client-sidebar-links {
        padding: 8px;
    }

    .vn-client-sidebar-links > a {
        min-height: 47px;
    }

    .vn-client-sidebar-links > a:hover {
        transform: none;
    }
}