/* ============================================================
   FORGED · nucleus.css
   Nucleus (support desk) — Cherenkov accent on the Molten shell.
   Loads after site.css + motion.css. Used by index (spotlight)
   and nucleus.html (full page). Cherenkov is Nucleus-exclusive:
   never mixed with Voltage (Synapse) or Ember in one viewport.
   ============================================================ */

/* ---- Cherenkov accent helpers (marketing surfaces) ---- */
.cyan { color: #2DD4FF; }
.azure { color: #4F7BFF; }

.btn-nuc { background: #2DD4FF; color: #06171B; }
.btn-nuc:hover { filter: brightness(1.06); }

.pill.nuc { background: rgba(45, 212, 255, 0.1); border-color: rgba(45, 212, 255, 0.32); color: #2DD4FF; }
.pill.nuc .dot { background: #2DD4FF; }
.pill.dev { background: rgba(79, 123, 255, 0.12); border-color: rgba(79, 123, 255, 0.34); color: #8FB4FF; }
.pill.dev .dot { background: #4F7BFF; animation: pulse-dot 2.4s ease-in-out infinite; }

/* sections themed to Cherenkov glow */
.nuc-scope { --glow: #2DD4FF; }

/* ============================================================
   NUCLEUS MARK (Twin Cross) — animated atom
   ============================================================ */
.nuc-mark { display: block; }
.nuc-mark .atom { transform-box: view-box; transform-origin: 50px 50px; }
.nuc-mark .core { transform-box: view-box; transform-origin: 50px 50px; }
@media (prefers-reduced-motion: no-preference) {
  .nuc-mark .spin-slow { animation: nspin 19s linear infinite; }
  .nuc-mark .spin-med  { animation: nspin 14s linear infinite; }
  .nuc-mark .breathe   { animation: nbreathe 3.4s ease-in-out infinite; }
}
@keyframes nspin { to { transform: rotate(360deg); } }
@keyframes nbreathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.84; transform: scale(0.9); } }
.nuc-mark-lg { width: 56px; height: 56px; filter: drop-shadow(0 0 22px rgba(45, 212, 255, 0.3)); }
@media (max-width: 600px) { .nuc-mark-lg { width: 46px; height: 46px; } }

/* product tag (cyan) — mirrors synapse-hero .product-tag */
.product-tag.nuc { background: rgba(45,212,255,0.08); border-color: rgba(45,212,255,0.3); color: #2DD4FF; }

/* ============================================================
   SPOTLIGHT (generic, used by the homepage Nucleus block)
   same rhythm as .synapse-hero but accent-agnostic
   ============================================================ */
.spotlight { display: grid; grid-template-columns: 1.18fr 1fr; gap: 60px; align-items: center; }
.spotlight.flip { grid-template-columns: 1fr 1.18fr; }
@media (max-width: 980px) { .spotlight, .spotlight.flip { grid-template-columns: 1fr; gap: 44px; } }
.spotlight .copy .product-tag { display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px; border: 1px solid; border-radius: var(--radius-full); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 22px; }
.spotlight .copy .product-tag .nuc-mark { width: 16px; height: 16px; margin: -2px 0; }
.spotlight .copy h2 { margin-bottom: 22px; }
.spotlight .copy p { font-size: 17px; line-height: 1.55; margin-bottom: 16px; }
.spotlight .copy .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--border); }
.spotlight .copy .feature-row .ft { display: flex; gap: 12px; align-items: flex-start; }
.spotlight .copy .feature-row .ft .bar { width: 3px; align-self: stretch; min-height: 34px; background: #2DD4FF; flex-shrink: 0; border-radius: 2px; }
.spotlight .copy .feature-row .ft .ftt { font-size: 13.5px; color: var(--text); font-weight: 600; line-height: 1.35; }
.spotlight .copy .feature-row .ft .ftd { font-size: 12.5px; color: var(--text-soft); margin-top: 3px; line-height: 1.5; }
.spotlight .cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* module icon + bar accents flip to cyan inside a nuc scope */
.nuc-scope .module-card .mc-ico { background: rgba(45,242,255,0.09); border-color: rgba(45,212,255,0.22); color: #2DD4FF; }
.nuc-scope .module-card .mc-list .li::before { background: #2DD4FF; }
.nuc-scope .step .sn { color: #2DD4FF; }
.nuc-scope .spec .si .sv .cyan { color: #2DD4FF; }
.nuc-scope .sec-card .sc-ico { background: rgba(45,212,255,0.1); border-color: rgba(45,212,255,0.24); color: #2DD4FF; }
.nuc-scope .diff-card .num { color: #2DD4FF; }

/* ============================================================
   NUCLEUS HELP-DESK DASHBOARD MOCK  (.ndash)
   Navy / Cherenkov — a live "Ticket HQ" view
   ============================================================ */
.ndash {
  position: relative; background: #0A1626; border: 1px solid #1E3A56;
  border-radius: var(--radius-xl); overflow: hidden;
  box-shadow: 0 40px 90px -24px rgba(0, 0, 0, 0.85);
  aspect-ratio: 16 / 11;
}
.ndash .chrome { height: 34px; background: #07101C; border-bottom: 1px solid #1E3A56; display: flex; align-items: center; padding: 0 12px; gap: 6px; }
.ndash .chrome .dot { width: 9px; height: 9px; border-radius: 50%; background: #1E3A56; }
.ndash .chrome .url { margin-left: 14px; font-family: var(--font-mono); font-size: 10px; color: #5A7393; letter-spacing: 0.04em; display: flex; align-items: center; gap: 6px; }
.ndash .chrome .url .lock { color: #2DD4FF; }
.ndash .chrome .url b { color: #8FA6C2; font-weight: 500; }
.ndash .layout { display: grid; grid-template-columns: 166px 1fr; height: calc(100% - 34px); }

/* sidebar */
.ndash .side { background: #07101C; border-right: 1px solid #1E3A56; padding: 13px 11px; display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.ndash .side .logo { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 900; font-size: 14px; letter-spacing: 0.02em; color: #E6EEF7; padding: 2px 4px 12px; }
.ndash .side .logo svg { width: 18px; height: 18px; flex-shrink: 0; }
.ndash .side .nav-i { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 7px; font-size: 11.5px; color: #8FA6C2; }
.ndash .side .nav-i .gi { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.85; }
.ndash .side .nav-i.active { background: #12233B; color: #E6EEF7; }
.ndash .side .nav-i.active .gi { color: #2DD4FF; opacity: 1; }
.ndash .side .nav-i .ct { margin-left: auto; font-family: var(--font-mono); font-size: 8.5px; color: #5A7393; background: #0E1E30; padding: 1px 5px; border-radius: 5px; }
.ndash .side .nav-i.active .ct { color: #06171B; background: #2DD4FF; }
.ndash .side .grp { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: 0.18em; color: #5A7393; text-transform: uppercase; padding: 14px 9px 6px; }
.ndash .side .spacer { flex: 1; }
.ndash .side .me { display: flex; align-items: center; gap: 8px; padding: 9px 6px 2px; border-top: 1px solid #1E3A56; margin-top: 8px; }
.ndash .side .me .av { width: 22px; height: 22px; border-radius: 6px; background: #12233B; color: #2DD4FF; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ndash .side .me .mn { font-size: 10.5px; color: #E6EEF7; font-weight: 600; line-height: 1.2; }
.ndash .side .me .mm { font-size: 9px; color: #8FA6C2; font-family: var(--font-mono); }

/* main */
.ndash .view { display: flex; flex-direction: column; min-width: 0; }
.ndash .topbar-app { height: 40px; border-bottom: 1px solid #1E3A56; display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.ndash .topbar-app .search { flex: 1; max-width: 220px; background: #07101C; border: 1px solid #1E3A56; border-radius: 7px; padding: 6px 9px; font-family: var(--font-mono); font-size: 9.5px; color: #5A7393; display: flex; align-items: center; gap: 7px; }
.ndash .topbar-app .new { margin-left: auto; background: #2DD4FF; color: #06171B; font-size: 10px; font-weight: 700; padding: 6px 11px; border-radius: 7px; display: flex; align-items: center; gap: 5px; }
.ndash .topbar-app .bell { width: 26px; height: 26px; border: 1px solid #1E3A56; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #8FA6C2; position: relative; }
.ndash .topbar-app .bell .bdot { position: absolute; top: 4px; right: 5px; width: 5px; height: 5px; border-radius: 50%; background: #FF5C5C; color: #FF5C5C; }
.ndash .topbar-app .bell svg { width: 13px; height: 13px; }

.ndash .body { padding: 15px 17px; overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
.ndash .crumb { font-family: var(--font-mono); font-size: 9.5px; color: #8FA6C2; letter-spacing: 0.04em; }
.ndash .crumb .sep { color: #355072; margin: 0 5px; }
.ndash .crumb .cur { color: #E6EEF7; }
.ndash .hq-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ndash .hq-title { font-family: var(--font-display); font-size: 21px; font-weight: 900; letter-spacing: -0.03em; color: #E6EEF7; line-height: 1; }
.ndash .sla-chip { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,92,92,0.1); border: 1px solid rgba(255,92,92,0.3); border-radius: var(--radius-full); padding: 5px 11px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; color: #FF8C8C; }
.ndash .sla-chip .lab { color: #C98F9A; }
.ndash .sla-chip b { color: #FF8C8C; font-weight: 700; }

.ndash .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; }
.ndash .stat { background: #0E1E30; border: 1px solid #1E3A56; border-radius: 10px; padding: 11px 12px; }
.ndash .stat .sv { font-family: var(--font-display); font-size: 23px; font-weight: 900; color: #E6EEF7; letter-spacing: -0.02em; line-height: 1; }
.ndash .stat.alert .sv { color: #FF8C8C; }
.ndash .stat .sl { font-family: var(--font-mono); font-size: 7.5px; letter-spacing: 0.14em; color: #8FA6C2; text-transform: uppercase; margin-top: 7px; }

.ndash .rowlabel { display: flex; align-items: center; justify-content: space-between; margin-top: 1px; }
.ndash .rowlabel .rl { font-family: var(--font-display); font-size: 12.5px; font-weight: 800; color: #E6EEF7; letter-spacing: -0.01em; }
.ndash .rowlabel .va { font-family: var(--font-mono); font-size: 8.5px; color: #8FA6C2; letter-spacing: 0.06em; }

.ndash .tickets { display: flex; flex-direction: column; gap: 7px; }
.ndash .trow { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 10px; background: #0E1E30; border: 1px solid #1E3A56; border-radius: 9px; padding: 9px 11px; }
.ndash .trow .pri { width: 4px; align-self: stretch; border-radius: 3px; min-height: 26px; }
.ndash .trow .pri.mc { background: #FF5C5C; }
.ndash .trow .pri.cr { background: #FFB347; }
.ndash .trow .pri.nc { background: #4F7BFF; }
.ndash .trow .tmain { min-width: 0; }
.ndash .trow .ts { font-size: 11.5px; color: #E6EEF7; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ndash .trow .tm { font-family: var(--font-mono); font-size: 8.5px; color: #8FA6C2; margin-top: 2px; }
.ndash .trow .tm .id { color: #2DD4FF; }
.ndash .trow .sla { font-family: var(--font-mono); font-size: 9.5px; color: #8FA6C2; text-align: right; min-width: 52px; }
.ndash .trow .sla.warn { color: #FF8C8C; }
.ndash .trow .sla .k { font-size: 7px; letter-spacing: 0.12em; color: #5A7393; display: block; text-transform: uppercase; }
.ndash .trow .own { width: 22px; height: 22px; border-radius: 6px; background: #12233B; color: #2DD4FF; font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.ndash .trow .own.un { background: transparent; border: 1px dashed #355072; color: #5A7393; }

@media (max-width: 980px) { .ndash { aspect-ratio: 16 / 12; } }
@media (max-width: 600px) {
  .ndash { aspect-ratio: auto; min-height: 460px; }
  .ndash .layout { grid-template-columns: 1fr; }
  .ndash .side { display: none; }
  .ndash .stats { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   ROADMAP TIMELINE (nucleus page — "where Nucleus is")
   ============================================================ */
.roadmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: rm; }
@media (max-width: 760px) { .roadmap { grid-template-columns: 1fr; } }
.rm-stage { position: relative; padding: 28px 26px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); }
.rm-stage.now { border-color: rgba(45,212,255,0.4); box-shadow: 0 0 0 1px rgba(45,212,255,0.16), 0 24px 60px -34px rgba(45,212,255,0.5); }
.rm-stage .ph { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: #2DD4FF; margin-bottom: 14px; display: inline-flex; align-items: center; gap: 8px; }
.rm-stage .ph .d { width: 7px; height: 7px; border-radius: 50%; background: #5A7393; }
.rm-stage.now .ph .d { background: #2DD4FF; color: #2DD4FF; }
.rm-stage.done .ph { color: #6BD968; }
.rm-stage.done .ph .d { background: #6BD968; }
.rm-stage h3 { color: var(--text); margin-bottom: 10px; }
.rm-stage p { font-size: 13.5px; line-height: 1.55; }
.rm-stage .tag { margin-top: 16px; display: inline-block; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--text-soft); padding: 4px 9px; border: 1px solid var(--border); border-radius: 6px; }
