@font-face { font-family: 'Nacelle'; src: url('/assets/design/fonts/nacelle-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nacelle'; src: url('/assets/design/fonts/nacelle-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Nacelle'; src: url('/assets/design/fonts/nacelle-semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nacelle'; src: url('/assets/design/fonts/nacelle-semibolditalic.woff2') format('woff2'); font-weight: 600; font-style: italic; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/assets/design/fonts/manrope-regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('/assets/design/fonts/manrope-semibold.ttf') format('truetype'); font-weight: 600 700; font-style: normal; font-display: swap; }

:root {
  --bg: #050910;
  --surface: #0b121d;
  --surface-2: #0f1827;
  --surface-1: #0b121d;
  --line: rgba(157, 207, 255, 0.16);
  --line-soft: rgba(157, 207, 255, 0.09);
  --text: #eaf2ff;
  --muted: rgba(191, 221, 255, 0.68);
  --muted-2: rgba(191, 221, 255, 0.46);
  --ghost: rgba(191, 221, 255, 0.34);
  --accent: #4a9eff;
  --accent-2: #65b0ff;
  --accent-soft: rgba(74, 158, 255, 0.14);
  --radius: 10px;
  --font-display: 'Nacelle', 'Manrope', 'Arial', sans-serif;
  --font-body: 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Manrope', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --indigo: #4a9eff;
  --indigo-soft: rgba(74, 158, 255, 0.14);
}

html { background: #050910; }
body { background: transparent; isolation: isolate; color: var(--text); font-family: var(--font-body); }
body::before { content: ''; position: fixed; inset: 0; z-index: -2; background: #050910; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; }
::selection { background: rgba(74, 158, 255, 0.35); color: #fff; }

.ambient-scene { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at 0% 20%, #102644 0, transparent 55%), radial-gradient(ellipse at 100% 85%, #161330 0, transparent 50%), #050910; }
.ambient-ribbon { position: absolute; width: 110vw; height: 42vh; min-height: 240px; border-radius: 50%; filter: blur(42px); opacity: .75; will-change: transform; }
.ribbon-one { left: -45%; top: 8%; transform: rotate(-28deg); background: linear-gradient(175deg, transparent 20%, #18588750 40%, #2789cba6 49%, #40c9ec55 52%, #1553a730 59%, transparent 75%); }
.ribbon-two { right: -45%; top: 28%; transform: rotate(-35deg); background: linear-gradient(175deg, transparent 22%, #203f9044 40%, #4168d891 48%, #6a80ff4d 51%, #302c8730 60%, transparent 78%); }
.ribbon-three { width: 80vw; height: 24vh; left: 10%; bottom: -12%; background: radial-gradient(ellipse, #2b71a56e, transparent 68%); filter: blur(60px); }
.ambient-stars { position: absolute; inset: 0; opacity: .42; background-image: radial-gradient(circle at 19px 31px, #c5ddff 0 1px, transparent 1.4px), radial-gradient(circle at 83px 127px, #8fbbf8 0 .7px, transparent 1px); background-size: 211px 197px, 307px 281px; mask-image: linear-gradient(#0009, #0004, transparent); -webkit-mask-image: linear-gradient(#0009, #0004, transparent); }
.ambient-grid { position: absolute; inset: 25% -20% -20%; background-image: linear-gradient(#7da8e50b 1px, transparent 1px), linear-gradient(90deg, #7da8e50b 1px, transparent 1px); background-size: 80px 80px; transform: perspective(700px) rotateX(50deg); mask-image: radial-gradient(ellipse, #0008, transparent 65%); -webkit-mask-image: radial-gradient(ellipse, #0008, transparent 65%); }
.ambient-scene::after { content: ''; position: absolute; inset: -20%; background: radial-gradient(ellipse at 32% 34%, #37cfff1c, transparent 30%), radial-gradient(ellipse at 72% 62%, #6862ff20, transparent 32%); pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .ribbon-one { animation: aurora-one 16s ease-in-out infinite; }
  .ribbon-two { animation: aurora-two 20s ease-in-out -7s infinite; }
  .ribbon-three { animation: aurora-floor 13s ease-in-out infinite alternate; }
  .ambient-stars { animation: stardrift 65s linear infinite; }
  .ambient-scene::after { animation: ambient-bloom 18s ease-in-out infinite alternate; }
  @keyframes aurora-one { 0%, 100% { transform: translate(-3vw, -2vh) rotate(-28deg) scale(1); opacity: .6; } 40% { transform: translate(13vw, 9vh) rotate(-16deg) scale(1.15); opacity: .9; } 70% { transform: translate(5vw, 15vh) rotate(-32deg) scale(1.08); opacity: .7; } }
  @keyframes aurora-two { 0%, 100% { transform: translate(2vw, 0) rotate(-35deg); opacity: .6; } 50% { transform: translate(-14vw, -10vh) rotate(-48deg) scale(1.16); opacity: .9; } }
  @keyframes aurora-floor { to { transform: translateY(-12vh) scale(1.3); opacity: .4; } }
  @keyframes stardrift { to { transform: translateY(-60px); } }
  @keyframes ambient-bloom { to { transform: translate(5%, -4%) rotate(8deg); opacity: .5; } }
}
@media (max-width: 767px) {
  .ambient-ribbon { filter: blur(28px); opacity: .55; }
  .ambient-grid { display: none; }
  .ribbon-one { top: 12%; width: 140vw; }
  .ribbon-two { top: 42%; width: 140vw; }
}
@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .ribbon-one { animation-duration: 22s; }
  .ribbon-two { animation-duration: 26s; }
}
@media (prefers-reduced-motion: reduce) {
  .ambient-ribbon { will-change: auto; animation: none !important; }
  .ambient-stars, .ambient-scene::after { animation: none !important; }
}

.vv-silk-bg, .vv-silk-shade, .page-particles, .grain-overlay { display: none !important; }

#vvPreloader { background: #050910; }

.btn-primary {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, #63b5ff, #3085ea); color: #fff;
  border: 1px solid #94ceff60; border-radius: 8px; font-weight: 700; letter-spacing: .02em;
  box-shadow: 0 12px 35px #207ed940, inset 0 1px #ffffff5c;
  transition: transform .2s ease, filter .2s ease, box-shadow .2s ease;
}
.btn-primary:hover { background: linear-gradient(135deg, #7cc2ff, #3a90f0); transform: translateY(-2px); filter: none; box-shadow: 0 16px 40px #207ed955, inset 0 1px #ffffff6e; }
.btn-primary:disabled { opacity: .5; transform: none; cursor: not-allowed; }
.btn-ghost { background: #08142170; border: 1px solid var(--line); border-radius: 8px; color: var(--text); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: #5dafff80; background: #4a9eff1c; }
a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid #8bccff; outline-offset: 4px; }
input[type=range]:focus-visible { outline: 3px solid #70bdff; outline-offset: -4px; }

header { padding: 0; }
header > .nav { border-radius: 0; border: 0; border-bottom: 1px solid #a4ccff14; background: #080e1899; backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); box-shadow: none; height: 76px; max-width: 1320px; padding-inline: 40px; }
header { background: #080e1899; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid #a4ccff14; pointer-events: auto; }
header > .nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom: 0; }
.nav::before { display: none; }
header.is-scrolled { background: #060b14d9; }
.brand-word { font-family: var(--font-display); font-weight: 600; letter-spacing: .24em; }
.brand-sep { background: linear-gradient(180deg, transparent, #9dcfff66, transparent); }
.nav-links { color: #aab4c6; }
.nav-links a:hover { color: #fff; background: transparent; }
.nav-links a.is-active { color: #fff; }
.nav-indicator { background: linear-gradient(90deg, transparent, #5aafff, transparent); box-shadow: 0 0 14px 1px #4a9eff80; bottom: -26px; }
.nav-indicator::after { background: radial-gradient(ellipse at 50% 0, #4a9eff40, transparent 70%); }
.nav-actions .btn-primary { border-radius: 8px; box-shadow: 0 8px 24px #207ed940, inset 0 1px #ffffff5c; }
.nav-user-btn[aria-expanded="true"], .nav-admin:hover, .nav-user-btn:hover { background: #4a9eff14; }
.nav-user-btn[aria-expanded="true"] { border-color: #4a9eff55; }
.nav-user-menu, .lang-switch-menu { background: #0b121df2; border-color: var(--line); border-radius: 12px; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 20px 50px #000a; }
.nav-user-item:hover, .lang-switch-option:hover { background: #4a9eff18; }
.lang-switch-option.is-active { background: #4a9eff22; }
.lang-switch-option.is-active::before { background: #4a9eff; }
.lang-switch-btn { background: #08142170; border-color: var(--line); border-radius: 8px; }
.lang-switch-btn:hover { border-color: #5dafff80; background: #4a9eff14; }
.lang-switch-btn[aria-expanded="true"] { border-color: #5dafff99; box-shadow: 0 0 0 1px #4a9eff30, 0 0 22px #4a9eff30; }
.nav-toggle { border-color: var(--line); background: #08142170; border-radius: 8px; }
.nav-toggle:hover { background: #4a9eff18; border-color: #5dafff80; }
.nav-drawer { background: #070d17f7; border-bottom-color: var(--line); }
.nav-drawer a.btn-primary { color: #fff; }
.nav-drawer a, .nav-drawer-login { color: var(--muted); border-bottom-color: var(--line-soft); }
@media (max-width: 900px) { header > .nav { padding-inline: 20px; height: 68px; } }

/* The dark footer gradient is painted by a full-bleed pseudo-element (the footer itself is a centred column, sometimes inside a
   max-width wrapper or a padded body): painting it on the footer box made the box edges show as a visible "cube". The site hides
   its scrollbar (below), so 100vw is exactly the visible width. Pages whose body has bottom padding set --vvx-foot-bleed to that padding so the gradient reaches the very end of the page (no hard bottom edge). */
.site-footer { position: relative; isolation: isolate; background: none; border-top: 0; }
.site-footer::before { content: ''; position: absolute; z-index: -1; top: 0; bottom: calc(var(--vvx-foot-bleed, 0px) * -1); left: 50%; width: 100vw; transform: translateX(-50%); pointer-events: none;
  background: linear-gradient(180deg, transparent, #060b15c9); border-top: 1px solid #8bc3ff12; }
.site-footer a, .site-footer button { color: var(--muted); }
.site-footer a:hover, .site-footer button:hover { color: #8bccff; }
.site-footer-col-title { color: var(--muted-2); }

.auth-overlay { background: rgba(3, 7, 14, 0.72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.auth-modal { background: linear-gradient(145deg, #111d2bf2, #080e17fa); border: 1px solid #9dcfff40; border-radius: 14px; box-shadow: 0 30px 80px #000c, 0 0 50px #4a9eff1c, inset 0 1px #ffffff14; }
.auth-field input, .auth-field select { background: #07101c; border-color: var(--line); border-radius: 8px; color: var(--text); }
.auth-field input:focus { border-color: #5dafff; box-shadow: 0 0 0 3px #4a9eff2a; outline: none; }
.auth-link-btn, .auth-switch button, .auth-legal-link { color: #8bccff; }
.auth-or span { background: #0c1522; }
.auth-discord-btn { border-radius: 8px; }
.checkout-summary, .checkout-method { border-color: var(--line); background: #07101c; border-radius: 10px; }
.checkout-method[aria-pressed="true"] { border-color: #4a9eff; box-shadow: 0 0 0 1px #4a9eff55, 0 0 24px #4a9eff22; }

.cart-panel, .cart-side, .co-card, .co-panel, .checkout-card, .card, .panel, .account-card, .acc-card, .section-card, .stat-card, .sub-card, .license-card, .info-card, .admin-card, .side-card {
  background: linear-gradient(145deg, #111d2be8, #080e17f2); border-color: var(--line); box-shadow: 0 12px 40px #0004;
}
input, select, textarea { font-family: inherit; }
input:not([type=range]):not([type=checkbox]):not([type=radio]):focus, select:focus, textarea:focus { border-color: #5dafff; outline: none; box-shadow: 0 0 0 3px #4a9eff2a; }
.vv-announce-bar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

:root { color-scheme: dark; }

html, body, .auth-overlay, .auth-modal, .nav-drawer { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar, .auth-overlay::-webkit-scrollbar, .auth-modal::-webkit-scrollbar, .nav-drawer::-webkit-scrollbar { display: none; width: 0; height: 0; }