/* ============================================================
   Virtax — public site (static, production)
   No build step. Plain CSS. Relative asset paths.
   ============================================================ */

:root {
  --bg: #0A0C0F;
  --panel: #12161C;
  --panel-deep: #0C1015;
  --border: #212A36;
  --border-line: #1C222C;
  --border-soft: #1A2029;
  --input-border: #273040;
  --text: #EDF1F6;
  --text-soft: #DFE6EF;
  --text-body: #C9D2DE;
  --muted: #8A94A6;
  --faint: #5F6B7D;
  --ghost: #4A5464;
  --cyan: #29D3E8;
  --cyan-ink: #05262B;
  --green: #3DDC97;
  --amber: #F5B84A;
  --red: #F16A5E;
  --font-body: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-head: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
  --font-mono: 'Cascadia Mono', 'SFMono-Regular', Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
html { scroll-behavior: smooth; }
body { overflow-x: hidden; }
a { color: var(--cyan); text-decoration: none; }
a:hover { color: #6EE7F5; }
h1, h2, h3, h4 { margin: 0; font-family: var(--font-head); font-weight: 600; line-height: 1.1; }
p { margin: 0; }
img { display: block; }
button { font-family: inherit; }
::selection { background: rgba(41,211,232,.26); }
* { scrollbar-width: thin; scrollbar-color: #2A3340 transparent; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: #232C38; border-radius: 5px; }

@keyframes vxGlow { 0%,100% { opacity:.5; transform: scale(1);} 50% { opacity:.85; transform: scale(1.08);} }
@keyframes vxPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(61,220,151,.35);} 50% { box-shadow: 0 0 0 6px rgba(61,220,151,0);} }
@keyframes vxFloat { 0%,100% { transform: translateY(0);} 50% { transform: translateY(-8px);} }

/* ---------- layout containers ---------- */
.wrap { max-width: 1180px; margin: 0 auto; }
.section { padding: 88px 24px; border-bottom: 1px solid #14181F; }
.section--alt { background: #0C0F14; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.feat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 52px; align-items: center; }

/* ---------- nav ---------- */
.nav-link { color: var(--text-body); font-size: 14px; font-weight: 500; padding: 8px 12px; border-radius: 6px; }
.nav-link:hover { background: rgba(255,255,255,.05); color: var(--text); }
.btn-primary { background: var(--cyan); color: var(--cyan-ink); font-weight: 700; border: none; border-radius: 8px; cursor: pointer; }
.btn-primary:hover { background: #4EDDEF; }
.btn-ghost { border: 1px solid var(--input-border); color: var(--text-soft); font-weight: 600; border-radius: 8px; background: none; cursor: pointer; }
.btn-ghost:hover { border-color: #3A4657; background: rgba(255,255,255,.03); }

/* ---------- stage selector ---------- */
.stage-chip { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; background: var(--panel); color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 9px 15px; font-family: var(--font-body); font-size: 14px; font-weight: 500; }
.stage-chip:hover { border-color: #3A4657; color: var(--text-soft); }
.stage-chip.active { background: rgba(41,211,232,.12); color: var(--text); border-color: rgba(41,211,232,.4); font-weight: 600; }
.stage-chip__n { font-family: var(--font-mono); font-size: 11px; opacity: .7; }

/* ---------- faq ---------- */
.faq-item { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.faq-btn { width: 100%; text-align: left; background: none; border: none; color: var(--text); padding: 18px 22px; display: flex; align-items: center; gap: 14px; cursor: pointer; font-family: var(--font-head); font-size: 16.5px; font-weight: 600; }
.faq-icon { margin-left: auto; flex-shrink: 0; color: var(--cyan); font-family: var(--font-mono); font-size: 20px; font-weight: 400; transition: transform .2s; }
.faq-answer { display: none; padding: 0 22px 20px; font-size: 15px; color: var(--text-body); line-height: 1.6; }
.faq-item.open .faq-answer { display: block; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ---------- form ---------- */
.field-input, .field-select, .field-textarea { background: var(--panel-deep); border: 1px solid var(--input-border); border-radius: 8px; color: var(--text); padding: 11px 13px; font-family: var(--font-body); font-size: 15px; outline: none; width: 100%; }
.field-textarea { resize: vertical; line-height: 1.5; }
.field-select { cursor: pointer; }
.field-input:focus, .field-select:focus, .field-textarea:focus { border-color: var(--cyan); }
.field-input::placeholder, .field-textarea::placeholder { color: #4E5968; }

/* ---------- responsive ---------- */
@media (max-width: 940px) {
  .nav-links { display: none !important; }
  .feat-row { grid-template-columns: 1fr; gap: 32px; }
  .feat-row .feat-media { order: -1 !important; }
  .grid-4 { grid-template-columns: 1fr 1fr; }
  .hero-split { grid-template-columns: 1fr !important; }
}
@media (max-width: 720px) {
  .section { padding: 60px 20px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .compare-hide { display: none; }
}