/* ==========================================================================
   GhostVoice — site theme (v2)
   Loaded on every page right after style.css (and download.css). style.css is
   built on tokens, so re-pointing them here moves every page to the new look:
   pure black, neutral greys, one neon accent, no aurora or gradients.
   ========================================================================== */

:root{
  --ink:     #f5f7fa;
  --soft:    #a3acb9;
  --dim:     #5f6773;
  --line:    rgba(255,255,255,0.09);
  --line-hi: rgba(255,255,255,0.18);
  --panel:   #0b0d10;
  --panel-2: #121519;
  --neon:    #3ee0ff;
  --neon-ink:#00141a;

  --bg:        #000;
  --bg-2:      #050607;
  --portal:    var(--panel);
  --surface:   var(--panel);
  --surface-2: var(--panel-2);
  --surface-3: #181c21;
  --border:    var(--line);
  --border-hi: var(--line-hi);
  --text:      var(--ink);
  --muted:     var(--soft);
  --faint:     var(--dim);
  --primary:   var(--neon);
  --primary-dark: #22b8d6;
  --accent:    var(--neon);
  --ghost:     var(--neon);
  --grad:      linear-gradient(var(--neon), var(--neon));
  --shadow-card: none;
  --shadow-glow: 0 0 0 1px var(--line-hi);
  --shadow-btn:  none;
  --radius-md: 18px;
  --radius-lg: 22px;
}

body{ background: #000; }
body::before,
body::after{ display: none; }                 /* no aurora, no grid */
p{ color: var(--soft); }
::selection{ background: rgba(62,224,255,0.3); }

/* single accent: solid neon pills, no gradients, no sheen */
.btn{ border-radius: 999px; font-weight: 600; }
.btn-primary{
  color: var(--neon-ink);
  background: var(--neon);
  box-shadow: none;
}
.btn-primary::after{ display: none; }
.btn-primary:hover{ background: #7ae9ff; box-shadow: 0 0 0 6px rgba(62,224,255,0.12); filter: none; }
.btn-ghost{
  color: var(--ink);
  background: rgba(255,255,255,0.04);
  border-color: var(--line-hi);
  backdrop-filter: blur(8px);
}
.btn-ghost:hover{ background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.3); }

.nav.scrolled{
  background: rgba(0,0,0,0.6);
  border-bottom-color: var(--line);
}
.nav-links a{ color: var(--soft); }
.nav-links a::after{ background: var(--neon); }
.brand img{ filter: none; }
.lang-btn{ border-color: var(--line-hi); background: transparent; }

/* plain label instead of the glowing pill */
.eyebrow{
  background: none;
  border: 0;
  padding: 0;
  font: 600 13px/1 var(--font-body);
  letter-spacing: 0;
  color: var(--neon);
}
.eyebrow::before{ display: none; }

.card{ background: var(--panel); }
.card.lift:hover{ transform: none; }

/* forms */
.field input,
.field textarea,
.field select{
  background: #070809;
  border-color: var(--line-hi);
}
.field input:focus,
.field textarea:focus,
.field select:focus{
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(62,224,255,0.18);
}
.status-msg.info{ color: #cdf6ff; background: rgba(62,224,255,0.08); border-color: rgba(62,224,255,0.35); }
.key-display{ box-shadow: none; }

.faq-item{ background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
.faq-item[open]{ background: transparent; }
.faq-item summary{ color: var(--ink); font-size: 17px; padding-inline: 4px; }
.faq-item summary:hover{ color: var(--neon); }
.faq-a{ color: var(--soft); padding-inline: 4px; }

footer{ border-top-color: var(--line); background: #000; }
.footer-col a:hover{ color: var(--neon); }

/* phones: logo, menu, language and one button have to share ~340px */
@media (max-width: 480px){
  .nav .container{ gap: 10px; padding-inline: 16px; }
  .nav-cta{ gap: 8px; }
  .nav-cta .btn{ padding-inline: 16px; font-size: 14px; }
  .brand{ font-size: 0; gap: 0; }
}

/* download page: no glow, and Arabic labels in the text face (a mono font
   has no Arabic, so the fallback came out letter-spaced and thin) */
.dl-card::before{ display: none; }
.dl-icon{ filter: none; border-radius: 20px; }
.req-list b,
.dl-meta{ font-family: var(--font-body); letter-spacing: 0; }