/*
 * _shared.css - EquityMint navContent premium design system
 * Imported by all navContent/*.html pages.
 */

: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-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);
}

/* 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: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  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%; }
}

.nc-hero h1 {
  font-size: clamp(2rem, 5vw, 3.8rem);
  line-height: 1.08;
  font-weight: 860;
  letter-spacing: -0.03em;
  margin-bottom: 16px;
  text-shadow: 0 10px 30px rgba(15, 8, 36, 0.42);
}

.nc-hero .nc-overline {
  display: inline-block;
  margin-bottom: 15px;
  padding: 7px 14px;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  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);
}

.nc-hero .nc-tagline {
  max-width: 880px;
  margin: 0 auto 26px;
  font-size: clamp(1.02rem, 2.2vw, 1.4rem);
  line-height: 1.55;
  color: rgba(242, 244, 255, 0.96);
  font-weight: 420;
}

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

.nc-section-title {
  font-size: clamp(1.5rem, 3.1vw, 2.5rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #f3f5ff;
  margin-bottom: 10px;
  font-weight: 780;
}

.nc-section-subtitle {
  max-width: 820px;
  margin-bottom: 34px;
  color: var(--nc-text-dim);
  font-size: 1.04rem;
  line-height: 1.72;
}

.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: 860;
  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: 760;
  letter-spacing: -0.01em;
}

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

.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: 800;
}

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

.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: 780;
  line-height: 1.3;
}

.nc-video-info p {
  color: #4b5479;
  font-size: 0.83rem;
  line-height: 1.5;
}

@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;
  }
}