/* ========================================================
   VoidChecker — voidchecker.xyz  (6-panel site)
   ======================================================== */

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

:root {
  --pri:  #ffffff;
  --sec:  #d4d4d4;
  --acc:  #e5e5e5;
  --gold: #ffffff;
  --bg:   #0a0a0a;
  --surface:      rgba(255,255,255,0.04);
  --surface2:     rgba(255,255,255,0.06);
  --border:       rgba(255,255,255,0.08);
  --border2:      rgba(255,255,255,0.12);
  --txt:  #e4e4e7;
  --txt2: #71717a;
  --txt3: #a1a1aa;
  --panel-dur: 700ms;
  --orb-dur:   800ms;
  --feat-dur:  420ms;
  --green: #ffffff;
  --red:   #ffffff;
  --blue:  #d4d4d4;
  --orange:#ffffff;
}

html { font-size: 16px; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  line-height: 1.5;
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; background: none; border: none; font: inherit; color: inherit; }
img, svg { display: block; }
svg { flex-shrink: 0; }

/* --Background Orbs ────────────────────────────────────── */
.vc-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.vc-orb {
  position: absolute; border-radius: 50%;
  filter: blur(80px); opacity: .5;
  transition:
    top var(--orb-dur) cubic-bezier(.4,0,.2,1),
    left var(--orb-dur) cubic-bezier(.4,0,.2,1),
    width var(--orb-dur) ease, height var(--orb-dur) ease,
    background var(--orb-dur) ease, opacity var(--orb-dur) ease;
}

/* per-panel orb positions */
body[data-panel="0"] .vc-orb-1 { width:560px;height:560px;top:-180px;left:-120px;background:radial-gradient(circle,#ffffff,transparent 70%); }
body[data-panel="0"] .vc-orb-2 { width:420px;height:420px;top:55%;left:75%;background:radial-gradient(circle,#e5e5e5,transparent 70%); }
body[data-panel="0"] .vc-orb-3 { width:360px;height:360px;top:70%;left:-80px;background:radial-gradient(circle,#d4d4d4,transparent 70%); }
body[data-panel="0"] .vc-orb-4 { width:300px;height:300px;top:-100px;left:60%;background:radial-gradient(circle,#666666,transparent 70%); }

body[data-panel="1"] .vc-orb-1 { width:480px;height:480px;top:30%;left:-200px;background:radial-gradient(circle,#d4d4d4,transparent 70%); }
body[data-panel="1"] .vc-orb-2 { width:520px;height:520px;top:-150px;left:60%;background:radial-gradient(circle,#ffffff,transparent 70%); }
body[data-panel="1"] .vc-orb-3 { width:380px;height:380px;top:60%;left:70%;background:radial-gradient(circle,#e5e5e5,transparent 70%); }
body[data-panel="1"] .vc-orb-4 { width:260px;height:260px;top:75%;left:20%;background:radial-gradient(circle,#1c1c1c,transparent 70%); }

body[data-panel="2"] .vc-orb-1 { width:520px;height:520px;top:-160px;left:30%;background:radial-gradient(circle,#e5e5e5,transparent 70%); }
body[data-panel="2"] .vc-orb-2 { width:440px;height:440px;top:45%;left:-160px;background:radial-gradient(circle,#ffffff,transparent 70%); }
body[data-panel="2"] .vc-orb-3 { width:400px;height:400px;top:55%;left:72%;background:radial-gradient(circle,#d4d4d4,transparent 70%); }
body[data-panel="2"] .vc-orb-4 { width:280px;height:280px;top:20%;left:80%;background:radial-gradient(circle,#1c1c1c,transparent 70%); }

body[data-panel="3"] .vc-orb-1 { width:560px;height:560px;top:40%;left:-180px;background:radial-gradient(circle,#ffffff,transparent 70%); }
body[data-panel="3"] .vc-orb-2 { width:400px;height:400px;top:-120px;left:70%;background:radial-gradient(circle,#e5e5e5,transparent 70%); }
body[data-panel="3"] .vc-orb-3 { width:340px;height:340px;top:10%;left:10%;background:radial-gradient(circle,#d4d4d4,transparent 70%); }
body[data-panel="3"] .vc-orb-4 { width:300px;height:300px;top:70%;left:60%;background:radial-gradient(circle,#666666,transparent 70%); }

body[data-panel="4"] .vc-orb-1 { width:480px;height:480px;top:-140px;left:-140px;background:radial-gradient(circle,#e5e5e5,transparent 70%); }
body[data-panel="4"] .vc-orb-2 { width:500px;height:500px;top:50%;left:70%;background:radial-gradient(circle,#ffffff,transparent 70%); }
body[data-panel="4"] .vc-orb-3 { width:380px;height:380px;top:65%;left:5%;background:radial-gradient(circle,#d4d4d4,transparent 70%); }
body[data-panel="4"] .vc-orb-4 { width:280px;height:280px;top:15%;left:55%;background:radial-gradient(circle,#1c1c1c,transparent 70%); }

body[data-panel="5"] .vc-orb-1 { width:600px;height:600px;top:25%;left:65%;background:radial-gradient(circle,#ffffff,transparent 70%); }
body[data-panel="5"] .vc-orb-2 { width:420px;height:420px;top:-140px;left:10%;background:radial-gradient(circle,#e5e5e5,transparent 70%); }
body[data-panel="5"] .vc-orb-3 { width:400px;height:400px;top:60%;left:-160px;background:radial-gradient(circle,#d4d4d4,transparent 70%); }
body[data-panel="5"] .vc-orb-4 { width:300px;height:300px;top:70%;left:40%;background:radial-gradient(circle,#1c1c1c,transparent 70%); }

/* --Nav ─────────────────────────────────────────────────── */
.vc-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 40px;
  background: rgba(10,10,10,0); border-bottom: 1px solid transparent;
  transition: background .35s ease, border-color .35s ease, padding .35s ease;
}
.vc-nav.scrolled { background: rgba(10,10,10,.8); backdrop-filter: blur(14px); border-bottom-color: var(--border); padding: 10px 40px; }
.vc-nav-dashmode { position: sticky; background: rgba(10,10,10,.8); backdrop-filter: blur(14px); border-bottom-color: var(--border); }

.vc-nav-logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: .3px; }
.vc-logo-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 18px rgba(255,255,255,.45); }
.vc-logo-mark-sm { width: 20px; height: 20px; border-radius: 6px; box-shadow: none; }
.vc-nav-logo-text { color: var(--txt); }

.vc-nav-links { display: flex; gap: 6px; }
.vc-nav-links a {
  padding: 8px 14px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: var(--txt2);
  transition: color .2s, background .2s;
}
.vc-nav-links a:hover { color: var(--txt); background: var(--surface); }

.vc-nav-right { display: flex; align-items: center; gap: 10px; }
.vc-nav-icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  color: var(--txt2); border: 1px solid var(--border); background: var(--surface);
  transition: color .2s, border-color .2s, transform .2s;
}
.vc-nav-icon:hover { color: var(--txt); border-color: var(--border2); transform: translateY(-1px); }
.vc-nav-cta {
  padding: 9px 20px; border-radius: 10px; font-size: 13.5px; font-weight: 700;
  background: linear-gradient(135deg, var(--pri), var(--sec)); color: #0a0a0a;
  box-shadow: 0 4px 20px rgba(255,255,255,.35);
  transition: transform .2s, box-shadow .2s;
}
.vc-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 26px rgba(255,255,255,.5); }
.vc-dash-key { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--txt2); }

/* --Dot nav + progress ──────────────────────────────────── */
.vc-dot-nav {
  position: fixed; right: 22px; top: 50%; transform: translateY(-50%);
  z-index: 90; display: flex; flex-direction: column; gap: 10px;
}
.vc-dot-nav-item { cursor: pointer; padding: 4px; display: grid; place-items: center; }
.vc-dot-nav-item span {
  width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,.18);
  transition: background .3s, transform .3s, box-shadow .3s;
}
.vc-dot-nav-item:hover span { background: rgba(255,255,255,.4); }
.vc-dot-nav-item.active span { background: var(--pri); transform: scale(1.35); box-shadow: 0 0 12px rgba(255,255,255,.8); }

.vc-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 110; background: transparent; }
.vc-progress-fill {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--sec), var(--pri), var(--acc));
  transition: width var(--panel-dur) cubic-bezier(.4,0,.2,1);
}

/* --Scroll hint ─────────────────────────────────────────── */
.vc-scroll-hint {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%);
  z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px;
  opacity: 0; pointer-events: none; transition: opacity .5s ease;
}
.vc-scroll-hint.visible { opacity: 1; }
.vc-scroll-hint span { font-size: 10px; letter-spacing: 2px; text-transform: uppercase; color: var(--txt2); }
.vc-scroll-hint-mouse {
  width: 22px; height: 34px; border: 1.5px solid rgba(255,255,255,.25); border-radius: 12px;
  display: flex; justify-content: center; padding-top: 6px;
}
.vc-scroll-hint-wheel { width: 3px; height: 7px; border-radius: 3px; background: var(--pri); animation: scroll-wheel 1.6s ease infinite; }
@keyframes scroll-wheel { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(9px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } }

/* --Panel system ────────────────────────────────────────── */
.vc-viewport { position: fixed; inset: 0; z-index: 1; overflow: hidden; }
.vc-track { height: 100%; transition: transform var(--panel-dur) cubic-bezier(.4,0,.2,1); }

.vc-panel {
  height: 100vh; position: relative; overflow: hidden;
  opacity: 0; visibility: hidden;
  transition: opacity var(--panel-dur) ease, visibility var(--panel-dur);
}
.vc-panel.is-active { opacity: 1; visibility: visible; }

/* content entrance */
.vc-panel .vc-hero-left, .vc-panel .vc-hero-right, .vc-panel .vc-feat-layout,
.vc-panel .vc-preview-center, .vc-panel .vc-preview-info, .vc-panel .vc-preview-gui-side,
.vc-panel .vc-pricing-wrap, .vc-panel .vc-reviews-layout, .vc-panel .vc-cta-layout, .vc-panel .vc-footer {
  opacity: 0; transform: translateY(26px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.vc-panel.is-active .vc-hero-left, .vc-panel.is-active .vc-hero-right,
.vc-panel.is-active .vc-feat-layout, .vc-panel.is-active .vc-preview-center,
.vc-panel.is-active .vc-preview-info, .vc-panel.is-active .vc-pricing-wrap,
.vc-panel.is-active .vc-reviews-layout, .vc-panel.is-active .vc-cta-layout, .vc-panel.is-active .vc-footer {
  opacity: 1; transform: none;
}
.vc-panel.is-active .vc-hero-right { transition-delay: .12s; }
.vc-panel.is-active .vc-footer { transition-delay: .1s; }

/* --Shared bits ─────────────────────────────────────────── */
.vc-grad {
  background: linear-gradient(120deg, var(--pri), var(--acc));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.vc-val-green { color: var(--green) !important; }
.vc-val-pri   { color: var(--pri) !important; }
.vc-val-red   { color: var(--red) !important; }
.vc-val-gold  { color: var(--gold) !important; }

.vc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 24px; border-radius: 12px; font-size: 14px; font-weight: 700;
  border: 1px solid var(--border2); color: var(--txt); background: var(--surface);
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s, border-color .2s, background .2s;
}
.vc-btn:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.2); }
.vc-btn-pri {
  background: linear-gradient(135deg, var(--pri), var(--sec));
  border-color: transparent; color: #0a0a0a;
  box-shadow: 0 4px 22px rgba(255,255,255,.35);
}
.vc-btn-pri:hover { box-shadow: 0 8px 30px rgba(255,255,255,.5); }
.vc-btn-ghost { background: rgba(255,255,255,.03); }
.vc-btn-lg { padding: 15px 30px; font-size: 15px; border-radius: 14px; }
.vc-btn-sm { padding: 7px 14px; font-size: 12.5px; border-radius: 9px; }
.vc-btn-block { width: 100%; }
.vc-btn-glow { animation: store-glow 3s ease infinite; }
@keyframes store-glow {
  0%, 100% { box-shadow: 0 4px 22px rgba(255,255,255,.3); }
  50%      { box-shadow: 0 4px 34px rgba(255,255,255,.4); }
}

.vc-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 20px; font-size: 12px; font-weight: 600;
  color: var(--txt3); border: 1px solid var(--border); background: var(--surface);
}
.vc-section-tag {
  display: inline-block; padding: 6px 14px; border-radius: 20px;
  font-size: 11px; font-weight: 800; letter-spacing: 2.5px;
  color: var(--pri); border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.08);
  margin-bottom: 18px;
}
.vc-pulse-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--pri); animation: pulse-dot 1.8s ease infinite;
}
.vc-pulse-green { background: var(--green); }
@keyframes pulse-dot { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .45; transform: scale(.8); } }

/* --HERO ────────────────────────────────────────────────── */
.vc-hero-inner {
  position: relative; z-index: 2; height: 100%;
  max-width: 1240px; margin: 0 auto; padding: 120px 40px 60px;
  display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center;
}
.vc-hero-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 16px; border-radius: 20px; font-size: 12px; font-weight: 700;
  color: var(--txt3); border: 1px solid var(--border); background: var(--surface);
  margin-bottom: 26px;
}
.vc-hero-title { font-size: clamp(46px, 5.6vw, 78px); font-weight: 900; line-height: 1.0; letter-spacing: -2.5px; margin-bottom: 22px; }
.vc-hero-sub { font-size: 16px; color: var(--txt2); line-height: 1.65; max-width: 480px; margin-bottom: 30px; }
.vc-hero-cta { display: flex; gap: 14px; margin-bottom: 24px; }
.vc-hero-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 34px; }
.vc-hero-stats { display: flex; gap: 0; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); max-width: 470px; }
.vc-hero-stat { flex: 1; padding: 18px 20px; border-right: 1px solid var(--border); }
.vc-hero-stat:last-child { border-right: none; }
.vc-hero-stat-num { font-size: 26px; font-weight: 800; letter-spacing: -1px; }
.vc-hero-stat-lbl { font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--txt2); margin-top: 3px; }

.vc-hero-right { position: relative; height: 100%; min-height: 420px; }
.vc-hero-right-glow {
  position: absolute; inset: 8% 4%;
  background: radial-gradient(ellipse at 55% 45%, rgba(255,255,255,.22), transparent 65%);
  filter: blur(30px); border-radius: 50%;
}
.vc-float-card {
  position: absolute; min-width: 250px;
  background: rgba(17,17,20,.82); backdrop-filter: blur(12px);
  border: 1px solid var(--border2); border-radius: 14px; padding: 0 0 6px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.02) inset;
  z-index: 2;
}
.vc-float-card-1 { top: 9%; left: 4%; animation: float-a 7s ease-in-out infinite; }
.vc-float-card-2 { top: 38%; right: 0%; animation: float-b 8s ease-in-out infinite; }
.vc-float-card-3 { bottom: 7%; left: 14%; animation: float-c 9s ease-in-out infinite; }
@keyframes float-a { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes float-b { 0%,100% { transform: translateY(0); } 50% { transform: translateY(12px); } }
@keyframes float-c { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.vc-fc-header {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 14px; font-size: 10.5px; font-weight: 800; letter-spacing: 1.5px; color: var(--txt3);
}
.vc-fc-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pri); box-shadow: 0 0 10px var(--pri); }
.vc-fc-dot-pink { background: var(--acc); box-shadow: 0 0 10px var(--acc); }
.vc-fc-dot-green { background: var(--green); box-shadow: 0 0 10px var(--green); }
.vc-fc-live { margin-left: auto; color: var(--green); font-size: 9.5px; letter-spacing: 1px; }
.vc-fc-sep { height: 1px; background: var(--border); margin: 0 14px; }
.vc-fc-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px 0; font-size: 12.5px; color: var(--txt2);
}
.vc-fc-row b { font-weight: 700; color: var(--txt); font-variant-numeric: tabular-nums; }

/* --FEATURES panel ──────────────────────────────────────── */
.vc-feat-layout {
  position: relative; z-index: 2; height: 100%;
  max-width: 1240px; margin: 0 auto; padding: 110px 40px 70px;
  display: grid; grid-template-columns: 280px 1fr; gap: 50px;
}
.vc-feat-nav { display: flex; flex-direction: column; }
.vc-feat-nav-label { font-size: 11px; font-weight: 800; letter-spacing: 2.5px; color: var(--txt2); margin-bottom: 16px; }
.vc-feat-nav-list { display: flex; flex-direction: column; gap: 2px; }
.vc-feat-nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-radius: 11px; cursor: pointer;
  font-size: 13.5px; font-weight: 600; color: var(--txt2);
  border: 1px solid transparent; transition: all .25s ease;
}
.vc-feat-nav-item .vn { font-size: 11px; font-weight: 700; color: var(--txt2); width: 18px; }
.vc-feat-nav-item:hover { color: var(--txt); background: var(--surface); }
.vc-feat-nav-item.active { color: var(--txt); background: var(--surface2); border-color: var(--border); }
.vc-feat-nav-item.active .vn { color: var(--pri); }
.vc-feat-scroll-hint { margin-top: auto; font-size: 11px; color: var(--txt2); display: flex; align-items: center; gap: 8px; }
.vc-feat-scroll-hint span { width: 16px; height: 16px; border-right: 1.5px solid var(--txt2); border-bottom: 1.5px solid var(--txt2); transform: rotate(45deg); animation: cue-bob 1.6s ease infinite; }
@keyframes cue-bob { 0%,100% { transform: rotate(45deg) translate(0,0); opacity: .6; } 50% { transform: rotate(45deg) translate(3px,3px); opacity: 1; } }

.vc-feat-content { position: relative; }
.vc-feat-step { display: none; height: 100%; }
.vc-feat-step.active { display: block; animation: feat-in .45s cubic-bezier(.16,1,.3,1); }
@keyframes feat-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.vc-feat-step-badge {
  display: inline-block; padding: 5px 13px; border-radius: 8px; font-size: 11px; font-weight: 800; letter-spacing: 1.5px;
  margin-bottom: 16px;
}
.vc-badge-pri    { color: var(--pri);   background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); }
.vc-badge-blue   { color: var(--blue);  background: rgba(255,255,255,.1);  border: 1px solid rgba(255,255,255,.3); }
.vc-badge-red    { color: var(--red);   background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); }
.vc-badge-orange { color: var(--orange);background: rgba(255,255,255,.1);  border: 1px solid rgba(255,255,255,.3); }
.vc-badge-gold   { color: var(--gold);  background: rgba(255,255,255,.1);  border: 1px solid rgba(255,255,255,.3); }
.vc-feat-step h2 { font-size: clamp(30px, 3.2vw, 44px); font-weight: 800; letter-spacing: -1.5px; line-height: 1.08; margin-bottom: 12px; }
.vc-feat-step .vc-feat-desc { color: var(--txt2); font-size: 14.5px; max-width: 560px; margin-bottom: 34px; line-height: 1.6; }

.vc-cards { display: grid; gap: 14px; }
.vc-cards-3 { grid-template-columns: repeat(3, 1fr); }
.vc-cards-4 { grid-template-columns: repeat(4, 1fr); }
.vc-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 15px;
  padding: 22px; transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s, background .25s, box-shadow .25s;
}
.vc-card:hover {
  transform: translateY(-4px); border-color: rgba(255,255,255,.35); background: var(--surface2);
  box-shadow: 0 14px 40px rgba(0,0,0,.35), 0 0 24px rgba(255,255,255,.08);
}
.vc-card-icon { font-size: 20px; margin-bottom: 12px; color: var(--pri); }
.vc-card-title { font-size: 14px; font-weight: 700; margin-bottom: 6px; letter-spacing: .2px; }
.vc-card-desc { font-size: 12.5px; color: var(--txt2); line-height: 1.55; }
.vc-card-unique { border-color: rgba(255,255,255,.3); background: linear-gradient(160deg, rgba(255,255,255,.07), var(--surface) 60%); }

.vc-feat-counter-bar { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); width: min(420px, 60%); }
.vc-feat-counter-track { height: 3px; border-radius: 3px; background: var(--border); overflow: hidden; }
.vc-feat-counter-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--pri), var(--acc)); border-radius: 3px; transition: width var(--feat-dur) ease; }

/* --PREVIEW panel ───────────────────────────────────────── */
.vc-preview-center {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px;
  transition: opacity .5s ease, transform .5s cubic-bezier(.16,1,.3,1);
}
.vc-preview-title { font-size: clamp(38px, 4.6vw, 62px); font-weight: 900; letter-spacing: -2px; line-height: 1.05; margin-bottom: 16px; }
.vc-preview-sub { color: var(--txt2); font-size: 15px; max-width: 440px; margin-bottom: 40px; }
.vc-preview-scroll-cue .vc-cue-mouse {
  width: 24px; height: 38px; border: 1.5px solid rgba(255,255,255,.25); border-radius: 13px;
  display: flex; justify-content: center; padding-top: 7px; margin: 0 auto;
}
.vc-cue-wheel { width: 3px; height: 8px; border-radius: 3px; background: var(--acc); animation: scroll-wheel 1.6s ease infinite; }

.vc-preview-info { position: absolute; top: 100px; left: 50%; transform: translateX(-50%); z-index: 2; text-align: center; opacity: 0; transition: opacity .5s ease; pointer-events: none; width: 90%; }
.vc-preview-info h2 { font-size: clamp(26px, 3vw, 40px); font-weight: 800; letter-spacing: -1.5px; }

.vc-preview-gui-side {
  position: absolute; inset: 0; z-index: 3; display: flex; align-items: center; justify-content: center;
  padding: 90px 40px 40px; pointer-events: none;
  opacity: 0; transform: translateY(50px) scale(.96);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16,1,.3,1);
}
.vc-gui-in .vc-preview-gui-side { opacity: 1; transform: none; pointer-events: auto; }
.vc-gui-in .vc-preview-center { opacity: 0; transform: translateY(-40px); pointer-events: none; }
.vc-gui-in .vc-preview-info { opacity: 1; }

.vc-gui-wrap { width: min(980px, 92vw); filter: drop-shadow(0 40px 80px rgba(0,0,0,.6)) drop-shadow(0 0 60px rgba(255,255,255,.12)); }
.vc-gui-window {
  background: #0e0e12; border: 1px solid var(--border2); border-radius: 14px; overflow: hidden;
}
.vc-gui-titlebar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 14px; background: #121216; border-bottom: 1px solid var(--border);
}
.vc-gui-tb-left { display: flex; align-items: center; gap: 7px; }
.vc-gui-dot { width: 10px; height: 10px; border-radius: 50%; background: #2a2a30; }
.vc-gui-tb-left b { font-size: 12px; margin-left: 6px; }
.vc-gui-tb-left i { font-style: normal; font-size: 11px; color: var(--txt2); }
.vc-gui-tb-actions { display: flex; gap: 5px; }
.vc-gui-tb-actions span { width: 10px; height: 10px; border-radius: 50%; background: #2a2a30; }
.vc-gui-main { display: grid; grid-template-columns: 190px 1fr; height: 480px; }
.vc-gui-sidebar { border-right: 1px solid var(--border); padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; }
.vc-gui-logo-area { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 800; padding: 4px 8px 12px; }
.vc-gui-section-lbl { font-size: 9px; font-weight: 800; letter-spacing: 1.8px; color: var(--txt2); padding: 10px 8px 5px; }
.vc-gui-tab {
  padding: 7px 10px; border-radius: 8px; font-size: 12px; font-weight: 600; color: var(--txt2);
  cursor: pointer; transition: background .2s, color .2s;
}
.vc-gui-tab:hover { color: var(--txt); background: var(--surface); }
.vc-gui-tab.active { color: var(--txt); background: rgba(255,255,255,.14); box-shadow: inset 2px 0 0 var(--pri); }
.vc-gui-spacer { flex: 1; }
.vc-gui-content { position: relative; overflow: hidden; }
.vc-gui-panel { position: absolute; inset: 0; padding: 20px; overflow-y: auto; opacity: 0; pointer-events: none; transition: opacity .25s ease; }
.vc-gui-panel.active { opacity: 1; pointer-events: auto; }

/* checker run panel */
.vc-chk-run-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.vc-chk-run-status { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; color: var(--txt3); }
.vc-chk-run-btns { display: flex; gap: 6px; }
.vc-chk-btn {
  padding: 5px 12px; border-radius: 7px; font-size: 10px; font-weight: 800; letter-spacing: 1px;
  border: 1px solid var(--border2); color: var(--txt3); cursor: pointer;
}
.vc-chk-btn:hover { color: var(--txt); }
.vc-chk-btn-red { color: var(--red); border-color: rgba(255,255,255,.3); }
.vc-chk-hero { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 16px; }
.vc-chk-hero-stat { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.vc-chk-hero-label { font-size: 9.5px; font-weight: 800; letter-spacing: 1.5px; color: var(--txt2); }
.vc-chk-hero-value { font-size: 22px; font-weight: 800; letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.vc-chk-hero-sub { font-size: 10.5px; color: var(--txt2); margin-top: 2px; }
.vc-chk-progress { margin-bottom: 16px; }
.vc-chk-progress-row { display: flex; justify-content: space-between; font-size: 11px; color: var(--txt2); margin-bottom: 6px; }
.vc-chk-progress-track { height: 6px; border-radius: 4px; background: var(--border); overflow: hidden; }
.vc-chk-progress-fill { height: 100%; border-radius: 4px; background: linear-gradient(90deg, var(--pri), var(--acc)); animation: fill-pulse 2.4s ease infinite; }
@keyframes fill-pulse { 0%,100% { filter: brightness(1); } 50% { filter: brightness(1.25); } }
.vc-chk-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.vc-chk-stat-section { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.vc-chk-stat-head { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: var(--txt3); margin-bottom: 8px; }
.vc-chk-stat-icon { font-size: 13px; }
.i-blue { color: var(--blue); } .i-pri { color: var(--pri); } .i-pink { color: var(--acc); }
.vc-chk-stat-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 12px; color: var(--txt2); border-top: 1px solid var(--border2); }
.vc-chk-stat-row b { font-variant-numeric: tabular-nums; color: var(--txt); }

/* hits / logs / config panels */
.vc-hits-toolbar, .vc-logs-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.vc-hits-toolbar b, .vc-logs-toolbar b { font-size: 11px; letter-spacing: 2px; color: var(--txt3); }
.vc-hits-list { display: flex; flex-direction: column; gap: 8px; }
.vc-hit-card {
  display: flex; gap: 11px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 11px 14px;
  animation: log-in .4s ease both;
}
@keyframes log-in { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } }
.vc-hit-avatar {
  width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
  background: rgba(255,255,255,.18); color: var(--pri); border: 1px solid rgba(255,255,255,.25);
}
.vc-hit-avatar-xbox { background: rgba(255,255,255,.15); color: var(--blue); border-color: rgba(255,255,255,.25); }
.vc-hit-avatar-donut { background: rgba(255,255,255,.15); color: var(--orange); border-color: rgba(255,255,255,.25); }
.vc-hit-combo { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12px; color: var(--txt); margin-bottom: 4px; }
.vc-hit-row { display: flex; gap: 6px; flex-wrap: wrap; }
.vc-tag { padding: 2.5px 8px; border-radius: 6px; font-size: 9.5px; font-weight: 700; letter-spacing: .5px; background: var(--surface2); color: var(--txt2); border: 1px solid var(--border); }
.t-green { color: var(--green); border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.07); }
.t-blue  { color: var(--blue);  border-color: rgba(255,255,255,.3);  background: rgba(255,255,255,.07); }
.t-gold  { color: var(--gold);  border-color: rgba(255,255,255,.3);  background: rgba(255,255,255,.07); }
.t-pink  { color: var(--acc);   border-color: rgba(255,255,255,.3);  background: rgba(255,255,255,.07); }
.t-orange{ color: var(--orange);border-color: rgba(255,255,255,.3); background: rgba(255,255,255,.07); }

.vc-logs-output { display: flex; flex-direction: column; gap: 3px; font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 11.5px; }
.vc-log-line { display: flex; gap: 9px; padding: 4px 8px; border-radius: 6px; animation: log-in .4s ease both; }
.vc-log-line:nth-child(1) { animation-delay: .05s; } .vc-log-line:nth-child(2) { animation-delay: .15s; }
.vc-log-line:nth-child(3) { animation-delay: .25s; } .vc-log-line:nth-child(4) { animation-delay: .35s; }
.vc-log-line:nth-child(5) { animation-delay: .45s; } .vc-log-line:nth-child(6) { animation-delay: .55s; }
.vc-log-line:hover { background: var(--surface); }
.vc-log-line i { font-style: normal; color: var(--txt2); }
.vc-log-line em { font-style: normal; font-weight: 800; font-size: 10px; padding: 1px 7px; border-radius: 5px; }
.vc-log-line em.t-good { color: var(--green); background: rgba(255,255,255,.08); }
.vc-log-line em.t-info { color: var(--blue);  background: rgba(255,255,255,.08); }
.vc-log-line em.t-2fa  { color: var(--gold);  background: rgba(255,255,255,.08); }

.vc-cfg-section-head { font-size: 10px; font-weight: 800; letter-spacing: 1.8px; color: var(--txt3); margin-bottom: 10px; }
.vc-cfg-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--border2); font-size: 12.5px; color: var(--txt2);
}
.vc-cfg-row b { color: var(--txt); font-weight: 600; }
.vc-cfg-divider { height: 1px; background: var(--border); margin: 16px 0; }
.vc-cfg-toggle {
  width: 34px; height: 19px; border-radius: 12px; background: var(--surface2); border: 1px solid var(--border2);
  position: relative; cursor: pointer; transition: background .25s, border-color .25s;
}
.vc-cfg-toggle i {
  position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; border-radius: 50%;
  background: var(--txt2); transition: transform .25s cubic-bezier(.16,1,.3,1), background .25s;
}
.vc-cfg-toggle.on { background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.45); }
.vc-cfg-toggle.on i { transform: translateX(15px); background: var(--pri); box-shadow: 0 0 8px rgba(255,255,255,.6); }

.vc-sn-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; margin-bottom: 9px; animation: log-in .4s ease both; }
.vc-sn-card:nth-child(3) { animation-delay: .1s; } .vc-sn-card:nth-child(4) { animation-delay: .2s; }
.vc-sn-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; }
.vc-sn-code { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 12.5px; color: var(--txt); }
.vc-sn-from { font-size: 11px; color: var(--txt2); }

/* --PRICING panel ───────────────────────────────────────── */
.vc-pricing-wrap { position: relative; z-index: 2; height: 100%; max-width: 1240px; margin: 0 auto; padding: 100px 40px 50px; display: flex; flex-direction: column; }
.vc-pricing-center-head { text-align: center; margin-bottom: 36px; }
.vc-pricing-center-head h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 900; letter-spacing: -1.5px; }
.vc-pricing-trust-row { display: flex; gap: 8px; justify-content: center; margin-top: 14px; }
.vc-pricing-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; flex: 1; align-content: center; }
.vc-pricing-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 28px 24px;
  transition: transform .3s cubic-bezier(.16,1,.3,1), border-color .3s, box-shadow .3s;
}
.vc-pricing-card:hover { transform: translateY(-6px); border-color: var(--border2); box-shadow: 0 20px 50px rgba(0,0,0,.4); }
.vc-pricing-card.featured {
  border-color: rgba(255,255,255,.5);
  background: linear-gradient(170deg, rgba(255,255,255,.12), var(--surface) 55%);
  box-shadow: 0 0 50px rgba(255,255,255,.12);
}
.vc-pricing-card.featured:hover { box-shadow: 0 0 70px rgba(255,255,255,.25); }
.vc-pricing-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  padding: 5px 16px; border-radius: 20px; font-size: 10px; font-weight: 800; letter-spacing: 1.5px;
  background: linear-gradient(135deg, var(--pri), var(--acc)); color: #0a0a0a;
  box-shadow: 0 4px 18px rgba(255,255,255,.45);
}
.vc-price-plan { font-size: 12px; font-weight: 800; letter-spacing: 2.5px; color: var(--txt2); }
.vc-price-amount { font-size: 44px; font-weight: 900; letter-spacing: -2px; margin: 10px 0 2px; }
.vc-plan-per-day { font-size: 12px; color: var(--txt2); }
.vc-plan-saving {
  display: inline-block; margin-top: 10px; padding: 4px 12px; border-radius: 14px;
  font-size: 10.5px; font-weight: 700; color: var(--green);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.25);
}
.vc-pricing-card ul { margin: 20px 0 24px; flex: 1; }
.vc-pricing-card li { padding: 8px 0; font-size: 13px; color: var(--txt2); border-bottom: 1px solid var(--border2); }
.vc-pricing-card li:last-child { border-bottom: none; }
.vc-pricing-card .vc-btn { width: 100%; }

/* --REVIEWS panel ───────────────────────────────────────── */
.vc-reviews-layout {
  position: relative; z-index: 2; height: 100%;
  max-width: 1240px; margin: 0 auto; padding: 100px 40px 50px;
  display: grid; grid-template-columns: 340px 1fr; gap: 44px; align-items: center;
}
.vc-rating-box {
  display: flex; align-items: center; gap: 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 26px;
  margin-top: 6px;
}
.vc-rating-big { font-size: 54px; font-weight: 900; letter-spacing: -2px; background: linear-gradient(120deg, var(--gold), var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vc-rating-stars { color: var(--gold); font-size: 15px; letter-spacing: 3px; }
.vc-rating-sub { font-size: 12px; color: var(--txt2); margin-top: 4px; }
.vc-coming-strip { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.vc-coming-card {
  display: flex; gap: 13px; align-items: center;
  background: var(--surface); border: 1px dashed var(--border2); border-radius: 14px; padding: 15px 17px;
}
.vc-coming-icon { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-size: 17px; color: var(--pri); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); }
.vc-coming-title { font-size: 13px; font-weight: 700; }
.vc-coming-info { font-size: 11.5px; color: var(--txt2); }
.vc-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; align-content: center; }
.vc-review-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 20px;
  transition: transform .25s cubic-bezier(.16,1,.3,1), border-color .25s;
}
.vc-review-card:hover { transform: translateY(-3px); border-color: var(--border2); }
.vc-review-stars { color: var(--gold); font-size: 12px; letter-spacing: 2px; margin-bottom: 10px; }
.vc-review-content { font-size: 12.5px; color: var(--txt3); line-height: 1.6; margin-bottom: 16px; }
.vc-review-author { display: flex; align-items: center; gap: 10px; }
.vc-review-avatar {
  width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center;
  font-weight: 800; font-size: 13px; background: linear-gradient(135deg, rgba(255,255,255,.3), rgba(255,255,255,.3));
}
.vc-review-name { font-size: 12.5px; font-weight: 700; }
.vc-review-date { font-size: 10.5px; color: var(--txt2); }

/* --CTA / FAQ panel ─────────────────────────────────────── */
.vc-cta-layout {
  position: relative; z-index: 2; height: 100%;
  max-width: 1240px; margin: 0 auto; padding: 110px 40px 90px;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 50px; align-items: center;
}
.vc-cta-eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 3px; color: var(--acc); margin-bottom: 14px; }
.vc-cta-left h2 { font-size: clamp(40px, 4.6vw, 64px); font-weight: 900; letter-spacing: -2px; line-height: 1.02; margin-bottom: 18px; }
.vc-cta-left p { color: var(--txt2); font-size: 15px; line-height: 1.65; max-width: 460px; margin-bottom: 28px; }
.vc-cta-actions { display: flex; gap: 13px; margin-bottom: 34px; }
.vc-cta-stat-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; max-width: 560px; }
.vc-cta-stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: 13px; padding: 16px 14px; }
.vc-cta-stat-num { font-size: 22px; font-weight: 800; letter-spacing: -1px; }
.vc-cta-stat-lbl { font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--txt2); margin-top: 3px; }

.vc-faq-side { display: flex; flex-direction: column; gap: 10px; }
.vc-faq-side-head { font-size: 11px; font-weight: 800; letter-spacing: 2.5px; color: var(--txt2); margin-bottom: 6px; }
.vc-faq-item { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 16px 20px; cursor: pointer; transition: border-color .25s, background .25s; }
.vc-faq-item:hover { border-color: var(--border2); background: var(--surface2); }
.vc-faq-item.open { border-color: rgba(255,255,255,.35); background: var(--surface2); }
.vc-faq-q { font-size: 13.5px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; }
.vc-faq-q::after { content: '+'; color: var(--pri); font-weight: 800; font-size: 16px; transition: transform .25s; }
.vc-faq-item.open .vc-faq-q::after { transform: rotate(45deg); }
.vc-faq-a { max-height: 0; overflow: hidden; transition: max-height .35s ease, padding .35s ease; font-size: 12.5px; color: var(--txt2); line-height: 1.6; }
.vc-faq-item.open .vc-faq-a { max-height: 140px; padding-top: 10px; }

.vc-footer { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; gap: 22px; padding: 20px; border-top: 1px solid var(--border); }
.vc-footer-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.vc-footer-copy { font-size: 11.5px; color: var(--txt2); }

/* --AUTH overlay ────────────────────────────────────────── */
.vc-auth { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; }
.vc-auth-backdrop { position: absolute; inset: 0; background: rgba(5,5,8,.75); backdrop-filter: blur(8px); animation: fade-in .25s ease; }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.vc-auth-card {
  position: relative; width: min(400px, 92vw);
  background: #101014; border: 1px solid var(--border2); border-radius: 20px;
  padding: 40px 36px 28px; text-align: center;
  box-shadow: 0 40px 100px rgba(0,0,0,.6), 0 0 60px rgba(255,255,255,.1);
  animation: card-in .4s cubic-bezier(.16,1,.3,1);
}
@keyframes card-in { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: none; } }
.vc-auth-close { position: absolute; top: 14px; right: 16px; color: var(--txt2); cursor: pointer; font-size: 14px; transition: color .2s; }
.vc-auth-close:hover { color: var(--txt); }
.vc-auth-logo { display: grid; place-items: center; margin-bottom: 18px; }
.vc-auth-card h2 { font-size: 20px; font-weight: 800; margin-bottom: 6px; }
.vc-auth-sub { color: var(--txt2); font-size: 13px; margin-bottom: 24px; }
.vc-input {
  width: 100%; background: var(--bg); border: 1px solid var(--border2); border-radius: 12px;
  color: var(--txt); padding: 14px 16px; font-size: 15px; font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: 1px; outline: none; transition: border-color .2s, box-shadow .2s;
}
.vc-input:focus { border-color: var(--pri); box-shadow: 0 0 0 3px rgba(255,255,255,.15); }
#vcLoginBtn { margin-top: 14px; }
.vc-auth-error { color: var(--red); font-size: 13px; margin-top: 12px; min-height: 18px; }
.vc-auth-foot { margin-top: 16px; font-size: 12.5px; color: var(--txt2); }
.vc-auth-foot a { color: var(--pri); font-weight: 600; }
.vc-auth-foot a:hover { text-decoration: underline; }

/* --DASHBOARD ───────────────────────────────────────────── */
.vc-dash { position: fixed; inset: 0; z-index: 250; background: var(--bg); overflow-y: auto; animation: fade-in .3s ease; }
.vc-nav-dashmode { display: flex; align-items: center; justify-content: space-between; }
.vc-dash-body { max-width: 1000px; margin: 0 auto; padding: 48px 24px 80px; position: relative; z-index: 2; }
.vc-dash-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 34px; }
.vc-dash-head h1 { font-size: 38px; font-weight: 900; letter-spacing: -1px; background: linear-gradient(120deg, var(--pri), var(--acc)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vc-dash-head p { color: var(--txt2); margin-top: 4px; }
.vc-dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; margin-bottom: 22px; }
.vc-dash-card { background: var(--surface); border: 1px solid var(--border); border-radius: 15px; padding: 20px; transition: border-color .25s; }
.vc-dash-card:hover { border-color: var(--border2); }
.vc-dash-label { font-size: 10px; color: var(--txt2); letter-spacing: 1.8px; margin-bottom: 8px; }
.vc-dash-val { font-size: 18px; font-weight: 800; }
.vc-dash-val-sm { font-size: 14px; font-weight: 700; }
.vc-dash-ban { display: none; margin: 0 0 18px; padding: 14px 18px; border-radius: 12px; font-weight: 700; font-size: 14px; line-height: 1.5; }
.vc-dash-ban.banned { background: rgba(220, 38, 38, .12); border: 1px solid rgba(220, 38, 38, .45); color: #fca5a5; }
.vc-dash-ban.expired { background: rgba(245, 158, 11, .12); border: 1px solid rgba(245, 158, 11, .45); color: #fcd34d; }
.vc-dash-panel { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 26px; margin-bottom: 18px; }
.vc-dash-panel h3 { font-size: 11px; letter-spacing: 2.5px; color: var(--txt2); margin-bottom: 16px; }
.vc-steps { padding-left: 20px; color: var(--txt2); font-size: 14px; line-height: 1.8; }
.vc-steps pre {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 13px 17px;
  margin: 10px 0; font-size: 13px; font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--txt);
}
.vc-steps code { background: var(--surface2); padding: 2px 7px; border-radius: 5px; font-size: 12px; color: var(--txt); }
.vc-feat-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.vc-feat-chip {
  font-size: 12px; padding: 9px 13px; border-radius: 9px;
  background: var(--bg); border: 1px solid var(--border); color: var(--txt2);
}
.vc-feat-chip.on { color: var(--green); border-color: rgba(255,255,255,.25); background: rgba(255,255,255,.04); }
.vc-feat-chip.off { opacity: .4; }

/* --MOBILE ──────────────────────────────────────────────── */
@media (max-width: 900px) {
  body { overflow: auto; }
  .vc-viewport { position: static; overflow: visible; }
  .vc-track { height: auto; transform: none !important; transition: none; }
  .vc-panel { height: auto; min-height: 100vh; opacity: 1; visibility: visible; padding: 90px 0 40px; }
  .vc-panel .vc-hero-left, .vc-panel .vc-feat-layout, .vc-panel .vc-pricing-wrap,
  .vc-panel .vc-reviews-layout, .vc-panel .vc-cta-layout { opacity: 1; transform: none; }
  .vc-hero-inner, .vc-feat-layout, .vc-preview-center, .vc-pricing-wrap,
  .vc-reviews-layout, .vc-cta-layout { grid-template-columns: 1fr; padding: 40px 24px; gap: 30px; }
  .vc-hero-right { display: none; }
  .vc-dot-nav, .vc-progress, .vc-scroll-hint { display: none; }
  .vc-nav { padding: 12px 20px; }
  .vc-nav-links { display: none; }
  .vc-cards-3, .vc-cards-4, .vc-pricing-grid-4, .vc-reviews-grid,
  .vc-cta-stat-cards, .vc-feat-list, .vc-dash-grid { grid-template-columns: 1fr 1fr; }
  .vc-preview-gui-side { position: static; opacity: 1; transform: none; pointer-events: auto; padding: 20px; }
  .vc-preview-center { padding: 60px 24px 20px; }
  .vc-preview-info { display: none; }
  .vc-gui-main { grid-template-columns: 1fr; height: auto; }
  .vc-gui-sidebar { flex-direction: row; flex-wrap: wrap; border-right: none; border-bottom: 1px solid var(--border); }
  .vc-gui-panel { position: static; min-height: 380px; }
  .vc-chk-hero, .vc-chk-cols { grid-template-columns: 1fr 1fr; }
  .vc-feat-nav-list { flex-direction: row; flex-wrap: wrap; }
  .vc-feat-counter-bar { display: none; }
  .vc-dash-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .vc-cards-3, .vc-cards-4, .vc-pricing-grid-4, .vc-reviews-grid { grid-template-columns: 1fr; }
  .vc-hero-stats { flex-direction: column; }
  .vc-hero-stat { border-right: none; border-bottom: 1px solid var(--border); }
  .vc-hero-stat:last-child { border-bottom: none; }
}

/* ========================================================
   v2 additions — nav cluster, join banner, footer, subpages
======================================================== */

.vc-nav-dash {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 11px; border-radius: 10px; font-size: 12px; font-weight: 700; color: var(--txt2);
  border: 1px solid var(--border); background: var(--surface);
  transition: color .2s, border-color .2s, background .2s, transform .2s;
}
.vc-nav-dash:hover { color: var(--txt); border-color: var(--border2); background: var(--surface2); transform: translateY(-1px); }
.vc-nav-dash.active { color: var(--txt); border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.08); }
.vc-nav-dash.active svg { color: var(--pri); }
.vc-nav-lbl { letter-spacing: .3px; }
.vc-nav-sep { width: 1px; height: 22px; background: var(--border2); margin: 0 4px; }
.vc-nav-icon { padding: 8px 9px; }
.vc-nav-icon svg { display: block; }

/* custom logo img replaces the fallback mark everywhere */
.vc-logo-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }

/* discord join banner */
.vc-join-banner {
  position: fixed; right: 24px; bottom: 24px; z-index: 120;
  display: flex; align-items: center; gap: 13px;
  max-width: 380px; padding: 15px 17px;
  background: rgba(17,17,22,.9); backdrop-filter: blur(14px);
  border: 1px solid var(--border2); border-radius: 15px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5), 0 0 30px rgba(255,255,255,.06);
  animation: join-in .5s cubic-bezier(.16,1,.3,1);
}
@keyframes join-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
.vc-join-banner.hidden { display: none; }
.vc-join-icon {
  width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center; color: #7289da;
  background: rgba(114,137,218,.12); border: 1px solid rgba(114,137,218,.3);
}
.vc-join-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vc-join-info b { font-size: 13px; }
.vc-join-info span { font-size: 11.5px; color: var(--txt2); }
.vc-join-btn {
  padding: 8px 15px; border-radius: 9px; font-size: 12px; font-weight: 700; flex-shrink: 0;
  background: #ffffff; color: #0a0a0a; transition: transform .2s, box-shadow .2s;
}
.vc-join-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,255,255,.4); }
.vc-join-close { position: absolute; top: 8px; right: 10px; font-size: 11px; color: var(--txt2); cursor: pointer; }
.vc-join-close:hover { color: var(--txt); }

/* footer */
.vc-footer { flex-wrap: wrap; gap: 14px 28px; }
.vc-footer-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.vc-footer-links a { font-size: 12px; color: var(--txt2); transition: color .2s; }
.vc-footer-links a:hover { color: var(--txt); }

/* ============ SUBPAGES (reviews/faq/docs/contact/legal) ============ */
body.vc-subpage { overflow: auto; }
.vc-subpage-wrap { position: relative; z-index: 2; max-width: 1100px; margin: 0 auto; padding: 120px 28px 60px; }
.vc-sub-hero { display: grid; grid-template-columns: 1fr 340px; gap: 44px; align-items: center; margin-bottom: 46px; }
.vc-sub-title { font-size: clamp(34px, 4.4vw, 56px); font-weight: 900; letter-spacing: -2px; line-height: 1.04; margin-bottom: 14px; }
.vc-sub-desc { color: var(--txt2); font-size: 15px; line-height: 1.65; max-width: 480px; }
.vc-sub-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.vc-sub-content { display: flex; flex-direction: column; gap: 14px; }
.vc-sub-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px 26px;
  transition: border-color .25s;
}
.vc-sub-card:hover { border-color: var(--border2); }
.vc-sub-card h3 { font-size: 16px; font-weight: 800; margin-bottom: 10px; }
.vc-sub-card p { color: var(--txt2); font-size: 13.5px; line-height: 1.7; }
.vc-sub-card a { color: var(--pri); font-weight: 600; }
.vc-sub-card a:hover { text-decoration: underline; }
.vc-sub-card pre {
  background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 13px 17px;
  margin: 12px 0; font-size: 12.5px; font-family: 'JetBrains Mono', ui-monospace, monospace; color: var(--txt);
  overflow-x: auto; line-height: 1.6;
}
.vc-sub-card code { background: var(--surface2); padding: 2px 7px; border-radius: 5px; font-size: 12px; color: var(--txt); }
.vc-sub-card ul { list-style: none; }
.vc-sub-card ul li { padding: 6px 0 6px 18px; position: relative; color: var(--txt2); font-size: 13.5px; line-height: 1.6; }
.vc-sub-card ul li::before { content: ''; position: absolute; left: 2px; top: 13px; width: 6px; height: 6px; border-radius: 50%; background: var(--pri); }
.vc-sub-card strong { color: var(--txt); font-weight: 700; }

/* faq page */
.vc-faq-layout { display: flex; flex-direction: column; gap: 10px; }
.vc-faq-item { cursor: pointer; }
.vc-faq-a { max-height: 0; }
/* faq needs static positioning on subpages */
.vc-faq-layout .vc-faq-a { padding-top: 0; }

/* contact cards */
.vc-contact-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.vc-contact-card { display: flex; gap: 15px; align-items: flex-start; }
.vc-contact-icon {
  width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0;
  display: grid; place-items: center; color: var(--pri);
  background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.25);
}
.vc-contact-card b { display: block; font-size: 14px; margin-bottom: 3px; }
.vc-contact-card p { font-size: 12.5px; }
.vc-contact-card .vc-contact-link { font-size: 12.5px; }

/* legal */
.vc-legal-note { margin-top: 6px; font-size: 12px; color: var(--txt2); }

/* subpage footer */
.vc-subfooter {
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px 26px;
  padding: 26px 20px; margin-top: 40px;
}
.vc-subfooter-logo { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.vc-subfooter-links { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.vc-subfooter-links a { font-size: 12px; color: var(--txt2); transition: color .2s; }
.vc-subfooter-links a:hover { color: var(--txt); }
.vc-subfooter-copy { font-size: 11.5px; color: var(--txt2); }

/* subpage nav needs the scrolled look permanently */
body.vc-subpage .vc-nav { background: rgba(10,10,10,.8); backdrop-filter: blur(14px); border-bottom-color: var(--border); }

/* subpage orbs (no data-panel scoping) */
body.vc-subpage .vc-orb-1 { width: 520px; height: 520px; top: -160px; left: -140px; background: radial-gradient(circle, #ffffff, transparent 70%); }
body.vc-subpage .vc-orb-2 { width: 460px; height: 460px; top: 30%; left: 72%; background: radial-gradient(circle, #e5e5e5, transparent 70%); }
body.vc-subpage .vc-orb-3 { width: 400px; height: 400px; top: 60%; left: -120px; background: radial-gradient(circle, #d4d4d4, transparent 70%); }
body.vc-subpage .vc-orb-4 { width: 300px; height: 300px; top: 75%; left: 40%; background: radial-gradient(circle, #666666, transparent 70%); }

@media (max-width: 900px) {
  .vc-nav-dash .vc-nav-lbl { display: none; }
  .vc-join-banner { right: 14px; left: 14px; bottom: 14px; max-width: none; }
  .vc-sub-hero { grid-template-columns: 1fr; gap: 24px; }
  .vc-contact-grid { grid-template-columns: 1fr; }
  .vc-footer { justify-content: center; }
}