/* ============================================================
   NEXUS THREAD — skin overrides (loaded after base inline CSS)
   Cyberpunk: acid yellow + cyan + magenta on a dark void.
============================================================ */

/* ---- Typography -------------------------------------------------- */
body{
  font-family:'Chakra Petch','Segoe UI',system-ui,sans-serif;
  letter-spacing:.01em;
}
h1,h2,h3,h4,
.hstat-num,.plan-amt,.app-sb-name,.modal h2{
  font-family:'Orbitron','Chakra Petch',sans-serif;
  letter-spacing:-.01em;
}
h1{letter-spacing:0;font-weight:800}
h2{font-weight:700}

/* Section eyebrow tags + small captions: Chakra Petch, wide tracking, cyan */
.tag,.ss-num,.plan-tier,.app-sect,.sup-247-bdg,.curr-btn,.lang-btn,.plan-per{
  font-family:'Chakra Petch',sans-serif;
}

/* ---- Atmosphere: void + neon city glow + faint grid -------------- */
body{background:var(--nt-void);}
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(1100px 620px at 82% -8%, rgba(255,43,214,.20), transparent 60%),
    radial-gradient(1000px 680px at 6% 4%, rgba(0,229,255,.18), transparent 58%),
    radial-gradient(900px 900px at 50% 118%, rgba(139,92,255,.16), transparent 62%),
    linear-gradient(180deg, #05060F 0%, #070914 50%, #05060F 100%);
}
body::after{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(0,229,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,229,255,.045) 1px, transparent 1px);
  background-size:46px 46px;
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 80%);
          mask-image:radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 80%);
}
/* Make canvas threads glow over the void */
#bg-canvas{mix-blend-mode:screen;opacity:.9}

/* Sections are translucent so the atmosphere reads through */
#features,#pricing,#security,#screenshots,#download,#support,footer,#hero{
  background:transparent !important;
}
#features,#download,#pricing{position:relative}
#features::before,#pricing::before,#download::before,#support::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(255,255,255,.018), rgba(255,255,255,0));
  border-top:1px solid rgba(0,229,255,.07);
  border-bottom:1px solid rgba(255,43,214,.06);
  pointer-events:none;
}

/* ---- Header ------------------------------------------------------ */
#hdr,[data-theme="dark"] #hdr{
  background:rgba(5,6,15,.72);
  backdrop-filter:blur(20px) saturate(160%);
  border-bottom:1px solid rgba(0,229,255,.16);
  box-shadow:0 1px 0 rgba(255,43,214,.10), 0 8px 30px rgba(0,0,0,.4);
}

/* ---- Brand mark: NT glitch glyph in place of the cloud square ---- */
.logo-mark,.modal-brand-sq,.app-sb-sq{
  background:url('nt-emoji-512.png') center/contain no-repeat !important;
  box-shadow:none !important;border-radius:4px;
}
.logo-mark{width:34px;height:34px}
.modal-brand-sq{width:30px;height:30px}
.app-sb-sq{width:24px;height:24px}
.logo-mark svg,.modal-brand-sq svg,.app-sb-sq svg{display:none}

/* Wordmark — Orbitron, acid yellow with magenta micro-offset */
.logo{
  font-family:'Orbitron',sans-serif;font-weight:800;
  color:var(--nt-yellow);letter-spacing:.02em;font-size:1.02rem;
  text-shadow:-1px -1px 0 rgba(255,43,214,.85), 0 0 10px rgba(242,253,5,.18);
}
.modal-brand span,.app-sb-name{color:var(--nt-yellow);font-family:'Orbitron',sans-serif}

/* ---- Hero -------------------------------------------------------- */
.hero-content h1 em{
  color:var(--nt-yellow);font-style:normal;
  text-shadow:-2px -2px 0 rgba(255,43,214,.55), 2px 2px 0 rgba(0,229,255,.30), 0 0 26px rgba(242,253,5,.22);
}
.hero-badge{
  background:rgba(5,6,15,.6) !important;color:var(--nt-cap-cyan) !important;
  border:1px solid rgba(0,229,255,.45) !important;
  box-shadow:0 0 0 1px rgba(255,43,214,.12), 0 6px 26px -8px rgba(0,229,255,.5) !important;
  font-family:'Chakra Petch',sans-serif;letter-spacing:.12em;text-transform:uppercase;
}
.hero-badge .dot{background:var(--nt-magenta);box-shadow:0 0 0 3px rgba(255,43,214,.3)}
.hstat-num{color:var(--nt-white);text-shadow:0 0 16px rgba(0,229,255,.18)}
.hstat+.hstat{border-left:1px solid var(--border)}

/* ---- Eyebrow tag ------------------------------------------------- */
.tag{
  color:var(--nt-cap-cyan);background:rgba(0,229,255,.08);
  border:1px solid rgba(0,229,255,.30);letter-spacing:.16em;
}

/* ---- Buttons ----------------------------------------------------- */
.btn-primary{
  background:var(--nt-yellow);color:#0a0a05;font-weight:700;
  box-shadow:0 0 0 1px rgba(255,43,214,.25), 0 6px 22px -6px rgba(242,253,5,.55);
}
.btn-primary:hover{
  background:#f8ff3a;color:#0a0a05;
  box-shadow:0 0 0 1px rgba(255,43,214,.4), 0 8px 30px -6px rgba(242,253,5,.7);
  transform:translateY(-1px);
}
.btn-outline{border:1.5px solid rgba(0,229,255,.35);color:var(--nt-cap-cyan)}
.btn-outline:hover{border-color:var(--nt-cyan);color:var(--nt-cyan);background:rgba(0,229,255,.08)}

/* ---- Feature / security / support icons -------------------------- */
.feat-ic,.sec-pt-ic,.sup-chan-ic,.sup-link-ic,.app-upzone-ic{
  background:rgba(0,229,255,.10);color:var(--nt-cyan);
  box-shadow:inset 0 0 0 1px rgba(0,229,255,.22), 0 0 18px -6px rgba(0,229,255,.45);
}
.feat-card:hover{border-color:rgba(0,229,255,.5);box-shadow:0 0 0 1px rgba(0,229,255,.2), var(--sh-lg)}
.feat-card,.price-card,.sec-pt,.sup-chan,.plat-item{backdrop-filter:blur(4px)}

/* ---- Pricing ----------------------------------------------------- */
.plan-tier{color:var(--nt-cap-cyan);letter-spacing:.14em}
.plan-amt{color:var(--nt-white)}
.price-card.pop{
  border-color:var(--nt-yellow);
  box-shadow:0 0 0 1px var(--nt-yellow), 0 0 40px -10px rgba(242,253,5,.4), var(--sh-lg);
}
.pop-lbl{background:var(--nt-yellow);color:#0a0a05;font-weight:700;font-family:'Chakra Petch',sans-serif}
.save-bdg{background:rgba(0,229,255,.12);color:var(--nt-cap-cyan)}
.tog-sw.on{background:var(--nt-cyan)}
.curr-btn.active,.lang-btn.active{background:var(--bg3);color:var(--nt-cap-cyan)}

/* ---- Security floating tags + diagram ---------------------------- */
.sec-tag{background:rgba(10,12,28,.85);border-color:rgba(0,229,255,.25);color:var(--nt-white)}
.led.grn{background:#26ffae;box-shadow:0 0 8px rgba(38,255,174,.7)}
.led.amb{background:var(--nt-yellow);box-shadow:0 0 8px rgba(242,253,5,.6)}

/* ---- Support 24/7 ------------------------------------------------ */
.sup-247-bdg{background:rgba(10,12,28,.7);border-color:rgba(0,229,255,.22)}
.sup-chan-meta{color:#26ffae;background:rgba(38,255,174,.12)}

/* ---- Footer ------------------------------------------------------ */
footer{border-top:1px solid rgba(0,229,255,.14)}

/* ---- Modals ------------------------------------------------------ */
.modal{border:1px solid rgba(0,229,255,.18);box-shadow:0 0 0 1px rgba(255,43,214,.08), var(--sh-lg)}
.modal-ov{background:rgba(2,3,10,.72)}
.modal h2{color:var(--nt-white)}

/* ---- Toast ------------------------------------------------------- */
#toast{background:var(--nt-yellow);color:#0a0a05;font-weight:600}

/* ---- App mockup: tint the chrome cyan/yellow --------------------- */
.app-ni.on{background:rgba(0,229,255,.16);color:var(--nt-cyan)}
.app-btn-sm.p{background:rgba(242,253,5,.16);color:var(--nt-yellow);border-color:rgba(242,253,5,.3)}
.app-stor-lbl span{color:var(--nt-cap-cyan)}

/* Selection */
::selection{background:rgba(0,229,255,.32);color:#fff}