/*
 * _shared.css — EquityMint navContent premium design system
 * Imported by all navContent/*.html pages.
 *
 * 2026 modernization pass:
 *   - Inter font ladder (loaded globally via indexStatic.html)
 *   - Slate charcoal palette (slate-900/700/500/200) on the body text
 *     so SaaS-style content matches the modernized top nav.
 *   - Hero keeps its dark gradient (signature brand moment) but the
 *     heading weight dropped from 860 → 700 — reads premium/clean
 *     instead of shouty (ontopharma / linear / vercel reference).
 *   - All section titles + cards switched to lighter Inter weights.
 */

:root {
  --nc-bg: #0b1022;
  --nc-bg-2: #0e1630;
  --nc-panel: rgba(16, 24, 51, 0.78);
  --nc-panel-strong: rgba(20, 31, 66, 0.94);
  --nc-text: #e7ebff;
  --nc-text-dim: #b5bedc;
  --nc-text-charcoal: #cbd5e1;        /* slate-300 — for body text in dark hero */
  --nc-accent: #7b8dff;
  --nc-accent-2: #b26cff;
  --nc-border: rgba(132, 149, 255, 0.28);
  --nc-shadow: 0 18px 45px rgba(5, 8, 20, 0.45);
  /* Modern font ladder — Inter loaded via /indexStatic.html */
  --nc-font-sans: 'Inter', 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* IMPORTANT:
   navContent pages are injected into the host app via NavManager, but their CSS
   is linked into the host document head. Therefore, ALL selectors here must be
   scoped to navContent's root element (`.nc-page`) to avoid affecting the host UI. */

:where(.nc-page),
:where(.nc-page) *,
:where(.nc-page) *::before,
:where(.nc-page) *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.nc-page {
  position: relative;
  isolation: isolate;
  min-height: 60vh;
  padding: 0 0 92px;
  font-family: var(--nc-font-sans);
  font-feature-settings: 'cv11', 'ss01', 'ss03';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.62;
  color: var(--nc-text);
  background:
    radial-gradient(900px 380px at 12% 0%, rgba(123, 141, 255, 0.17), transparent 68%),
    radial-gradient(820px 330px at 100% 18%, rgba(178, 108, 255, 0.14), transparent 70%),
    linear-gradient(180deg, #090f21 0%, #0b1226 42%, #0a1022 100%);
}

.nc-page::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.055) 1px, transparent 0);
  background-size: 22px 22px;
  opacity: 0.2;
  pointer-events: none;
  z-index: -1;
}

.nc-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 112px) 24px clamp(52px, 6vw, 84px);
  text-align: center;
  background:
    radial-gradient(700px 300px at 10% 0%, rgba(255, 255, 255, 0.22), transparent 70%),
    linear-gradient(135deg, #4d67ff 0%, #7f4ae2 50%, #e070da 100%);
  background-size: 180% 180%;
  animation: ncGradientShift 16s ease infinite;
  border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 -24px 45px rgba(12, 18, 44, 0.25);
}

.nc-hero::after {
  content: "";
  position: absolute;
  inset: auto -20% -45% -20%;
  height: 70%;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.18), transparent 62%);
  pointer-events: none;
}

@keyframes ncGradientShift {
  0%,
  100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* Hero H1 weight: 860 → 700. The old 860 was effectively black + ultra-
   black, which feels dated/shouty against modern SaaS reference. Inter
   700 with tight tracking reads premium and clean — the ontopharma /
   linear / vercel look. Letter-spacing is bumped slightly tighter too. */
.nc-hero h1 {
  font-size: clamp(2.1rem, 5.2vw, 4rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.035em;
  margin-bottom: 16px;
  text-shadow: 0 8px 28px rgba(15, 8, 36, 0.32);
}

.nc-hero .nc-overline {
  display: inline-block;
  margin-bottom: 15px;
  padding: 7px 14px;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(245, 248, 255, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  background: rgba(15, 15, 40, 0.22);
  backdrop-filter: blur(6px);
}

/* Tagline weight 420 → 400 (Inter doesn't have 420; 400 is regular,
   the closest sensible weight). Slightly tighter tracking for the
   modern look. */
.nc-hero .nc-tagline {
  max-width: 880px;
  margin: 0 auto 26px;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  line-height: 1.52;
  letter-spacing: -0.005em;
  color: rgba(242, 244, 255, 0.96);
  font-weight: 400;
}

.nc-section {
  max-width: 1240px;
  margin: 0 auto;
  padding: 62px 26px 0;
}

/* Section title: weight 780 → 700, slightly tighter tracking.
   Reads premium/modern instead of overweight. */
.nc-section-title {
  font-size: clamp(1.55rem, 3.2vw, 2.6rem);
  line-height: 1.12;
  letter-spacing: -0.028em;
  color: #f3f5ff;
  margin-bottom: 10px;
  font-weight: 700;
}

.nc-section-subtitle {
  max-width: 820px;
  margin-bottom: 34px;
  color: var(--nc-text-dim);
  font-size: 1.04rem;
  line-height: 1.7;
  font-weight: 400;
  letter-spacing: -0.005em;
}

.nc-stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 36px;
}

.nc-stat {
  min-width: 160px;
  padding: 14px 20px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(8, 13, 35, 0.24);
  backdrop-filter: blur(7px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22);
  text-align: center;
}

.nc-stat-number {
  display: block;
  font-size: clamp(2rem, 3vw, 2.5rem);
  line-height: 1;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: #ffffff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

.nc-stat-label {
  margin-top: 7px;
  display: block;
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(237, 240, 255, 0.84);
}

.nc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
  margin-top: 22px;
}

.nc-card {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  padding: 24px 22px;
  border: 1px solid var(--nc-border);
  background: linear-gradient(165deg, rgba(24, 34, 70, 0.9), rgba(13, 20, 45, 0.96));
  box-shadow: var(--nc-shadow);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.nc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(420px 150px at -2% -8%, rgba(255, 255, 255, 0.2), transparent 62%);
  opacity: 0.72;
  pointer-events: none;
}

.nc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 52px rgba(4, 8, 20, 0.52);
  border-color: rgba(170, 187, 255, 0.5);
}

.nc-card h3 {
  position: relative;
  color: #ffffff;
  font-size: 1.1rem;
  margin-bottom: 10px;
  font-weight: 600;
  letter-spacing: -0.015em;
}

.nc-card p {
  position: relative;
  color: #c6cdea;
  font-size: 0.95rem;
  line-height: 1.66;
  font-weight: 400;
}

.nc-card .nc-card-icon {
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
  font-size: 1.85rem;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
}

.nc-card--gold { border-color: rgba(255, 213, 87, 0.5); }
.nc-card--green { border-color: rgba(93, 220, 162, 0.5); }
.nc-card--cyan { border-color: rgba(88, 212, 255, 0.52); }
.nc-card--red { border-color: rgba(255, 120, 132, 0.52); }
.nc-card--purple { border-color: rgba(194, 132, 255, 0.52); }

.nc-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 14px;
  margin-top: 26px;
  counter-reset: step;
}

.nc-flow-step {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(126, 146, 255, 0.35);
  background: linear-gradient(165deg, rgba(19, 29, 62, 0.92), rgba(14, 21, 49, 0.95));
  padding: 22px 18px;
  text-align: center;
}

.nc-flow-step::before {
  counter-increment: step;
  content: counter(step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  margin-bottom: 12px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  background: linear-gradient(135deg, #7b8dff, #b26cff);
  box-shadow: 0 6px 15px rgba(101, 115, 255, 0.35);
}

.nc-flow-step h4 {
  color: #eef2ff;
  font-size: 0.96rem;
  margin-bottom: 8px;
  font-weight: 730;
}

.nc-flow-step p {
  color: #aab4d6;
  font-size: 0.87rem;
  line-height: 1.56;
}

.nc-callout {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(137, 153, 255, 0.42);
  background: linear-gradient(145deg, rgba(24, 35, 77, 0.88), rgba(14, 21, 48, 0.94));
  padding: clamp(24px, 4vw, 34px) clamp(20px, 3.2vw, 34px);
  margin: 30px 0;
  box-shadow: var(--nc-shadow);
  text-align: center;
}

.nc-callout::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(620px 150px at 50% 0%, rgba(255, 255, 255, 0.18), transparent 62%);
  opacity: 0.8;
  pointer-events: none;
}

.nc-callout h3 {
  position: relative;
  margin-bottom: 10px;
  color: #ffe899;
  font-size: clamp(1.12rem, 2.3vw, 1.45rem);
  font-weight: 600;
  letter-spacing: -0.015em;
}

.nc-callout p {
  position: relative;
  color: #dce2fb;
  font-size: 1rem;
  line-height: 1.7;
  font-weight: 400;
}

.nc-callout--gold {
  border-color: rgba(255, 213, 87, 0.54);
  background: linear-gradient(145deg, rgba(59, 45, 16, 0.7), rgba(23, 32, 67, 0.92));
}

.nc-callout--green {
  border-color: rgba(93, 220, 162, 0.55);
  background: linear-gradient(145deg, rgba(13, 59, 49, 0.72), rgba(18, 32, 68, 0.92));
}

.nc-callout--red {
  border-color: rgba(255, 120, 132, 0.58);
  background: linear-gradient(145deg, rgba(64, 18, 28, 0.75), rgba(24, 28, 58, 0.94));
}

.nc-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 20px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 32px rgba(2, 6, 20, 0.4);
}

.nc-table th {
  padding: 13px 16px;
  text-align: left;
  color: #f8f9ff;
  font-size: 0.88rem;
  letter-spacing: 0.04em;
  background: linear-gradient(135deg, rgba(104, 122, 246, 0.72), rgba(137, 89, 232, 0.72));
}

.nc-table td {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(17, 25, 51, 0.82);
  color: #ccd4ef;
  font-size: 0.92rem;
}

.nc-table tr:hover td {
  background: rgba(34, 47, 92, 0.86);
}

.nc-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 760;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.1;
}

.nc-badge--blue {
  border: 1px solid rgba(123, 141, 255, 0.5);
  color: #bdc8ff;
  background: rgba(123, 141, 255, 0.2);
}

.nc-badge--gold {
  border: 1px solid rgba(255, 213, 87, 0.52);
  color: #ffe082;
  background: rgba(255, 213, 87, 0.18);
}

.nc-badge--green {
  border: 1px solid rgba(93, 220, 162, 0.52);
  color: #a6efc8;
  background: rgba(93, 220, 162, 0.18);
}

.nc-badge--red {
  border: 1px solid rgba(255, 120, 132, 0.56);
  color: #ffbec7;
  background: rgba(255, 120, 132, 0.18);
}

.nc-badge--new {
  border: 1px solid rgba(88, 212, 255, 0.56);
  color: #b9ecff;
  background: rgba(88, 212, 255, 0.18);
}

.nc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 11px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 0.96rem;
  font-weight: 710;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}

.nc-btn--primary {
  color: #ffffff;
  background: linear-gradient(135deg, #6578ff, #9158ec);
  box-shadow: 0 10px 24px rgba(84, 98, 219, 0.42);
}

.nc-btn--primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(77, 91, 216, 0.54);
}

.nc-btn--outline {
  color: #d6deff;
  border-color: rgba(125, 142, 255, 0.62);
  background: rgba(24, 34, 70, 0.46);
}

.nc-btn--outline:hover {
  transform: translateY(-2px);
  background: rgba(44, 60, 118, 0.65);
  border-color: rgba(166, 180, 255, 0.82);
}

.nc-btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.nc-code {
  margin-top: 18px;
  padding: 18px 18px;
  border-radius: 12px;
  border: 1px solid rgba(128, 147, 255, 0.35);
  background: linear-gradient(165deg, rgba(9, 14, 32, 0.95), rgba(5, 10, 23, 0.98));
  color: #d7e0ff;
  font-family: "Fira Code", "Cascadia Code", "Consolas", "Courier New", monospace;
  font-size: 0.86rem;
  line-height: 1.67;
  overflow-x: auto;
  box-shadow: 0 10px 28px rgba(3, 6, 17, 0.5);
}

.nc-code .kw { color: #ff9aa7; }
.nc-code .fn { color: #c5b6ff; }
.nc-code .cm { color: #8f9bbb; font-style: italic; }
.nc-code .str { color: #96e3ff; }

.nc-subnav {
  position: sticky;
  top: 12px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  margin: 0 0 18px;
  border-radius: 12px;
  border: 1px solid rgba(126, 146, 255, 0.26);
  background: rgba(12, 19, 44, 0.6);
  backdrop-filter: blur(6px);
}

.nc-subnav-item {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(124, 142, 255, 0.36);
  color: #c8d2ff;
  background: rgba(32, 46, 92, 0.42);
  font-size: 0.83rem;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
}

.nc-subnav-item:hover,
.nc-subnav-item.active {
  color: #ffffff;
  border-color: rgba(170, 184, 255, 0.76);
  background: linear-gradient(135deg, rgba(107, 124, 243, 0.4), rgba(138, 87, 236, 0.35));
}

.nc-divider {
  border: none;
  border-top: 1px solid rgba(211, 220, 255, 0.16);
  margin: 42px 0;
}

.nc-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.nc-video-card {
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid rgba(101, 119, 236, 0.25);
  background: linear-gradient(165deg, #f8faff, #e7ecff);
  box-shadow: 0 14px 36px rgba(2, 7, 20, 0.34);
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.nc-video-card:hover {
  transform: translateY(-5px);
  border-color: rgba(101, 119, 236, 0.55);
  box-shadow: 0 22px 44px rgba(7, 14, 33, 0.43);
}

.nc-video-thumb {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  background: #010203;
}

.nc-video-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nc-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  transform: translate(-50%, -50%);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.28);
}

.nc-video-play::after {
  content: "";
  position: absolute;
  left: 22px;
  top: 18px;
  width: 0;
  height: 0;
  border-left: 15px solid #6375f4;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
}

.nc-video-info {
  padding: 13px 14px 15px;
}

.nc-video-info h3 {
  margin-bottom: 6px;
  color: #4f62da;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.3;
}

.nc-video-info p {
  color: #475569;
  font-size: 0.83rem;
  line-height: 1.55;
  font-weight: 400;
}

@media (max-width: 768px) {
  .nc-page { padding-bottom: 74px; }
  .nc-hero { padding: 58px 16px 50px; }
  .nc-section { padding: 42px 16px 0; }
  .nc-stats { gap: 10px; }
  .nc-stat {
    min-width: 140px;
    padding: 12px 14px;
  }
  .nc-card-grid { gap: 14px; }
  .nc-flow { grid-template-columns: 1fr; }
  .nc-btn { width: 100%; }
  .nc-btn-group { gap: 10px; }
  .nc-subnav {
    top: 6px;
    padding: 8px;
  }
}