/* ================================================================
   NAVIGATOR AI — Page-specific styles
   navigator.css  (layered on top of case-study.css)
================================================================ */

/* ── Navigator color tokens ─────────────────────────────────── */
.nav-page {
  --nav:        #6366f1;
  --nav-bright: #818cf8;
  --nav-cyan:   #22d3ee;
  --nav-glow:   rgba(99,102,241,.12);
  --nav-border: rgba(99,102,241,.28);
  --nav-dim:    rgba(99,102,241,.07);
}


/* ================================================================
   HERO
================================================================ */
.nav-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  background: var(--bg);
}

/* Gradient orbs */
.nav-hero-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(80px);
}

.nav-orb-1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(99,102,241,.22) 0%, transparent 70%);
  top: -120px; left: -100px;
  animation: navOrb1 8s ease-in-out infinite alternate;
}

.nav-orb-2 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(34,211,238,.12) 0%, transparent 70%);
  bottom: 100px; right: -80px;
  animation: navOrb2 10s ease-in-out infinite alternate;
}

.nav-orb-3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(99,102,241,.1) 0%, transparent 70%);
  top: 40%; left: 50%;
  animation: navOrb3 12s ease-in-out infinite alternate;
}

@keyframes navOrb1 {
  from { transform: translate(0, 0); }
  to   { transform: translate(40px, 30px); }
}
@keyframes navOrb2 {
  from { transform: translate(0, 0); }
  to   { transform: translate(-30px, -20px); }
}
@keyframes navOrb3 {
  from { transform: translate(-50%, -50%) scale(1); }
  to   { transform: translate(-50%, -50%) scale(1.15); }
}

/* Dot grid overlay */
.nav-hero-grid {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(99,102,241,.12) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, transparent 40%, black 100%);
}

.nav-hero-inner {
  position: relative;
  z-index: 2;
  padding: 120px 48px 56px;
  max-width: 1080px;
  margin: 0 auto;
  width: 100%;
}

.nav-hero-text {
  max-width: 600px;
  position: relative;
  z-index: 2;
}

.nav-hero-image {
  position: absolute;
  top: 20%;
  right: -320px;
  transform: translateY(-50%);
  width: 72%;
  z-index: 1;
  pointer-events: none;
}

.nav-hero-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  filter: drop-shadow(-24px 32px 72px rgba(99,102,241,.3));
  mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
}

.nav-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--nav-bright);
  margin-bottom: 24px;
  display: block;
}

.nav-hero-title {
  font-family: var(--serif);
  font-size: clamp(52px, 8vw, 96px);
  line-height: 1.0;
  letter-spacing: -.02em;
  color: var(--text);
  margin-bottom: 32px;
}

.nav-gradient-text {
  background: linear-gradient(135deg, var(--nav-bright) 0%, var(--nav-cyan) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  font-style: italic;
}

.nav-hero-desc {
  font-size: 17px;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 600px;
  margin-bottom: 40px;
}

.nav-hero-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nav-chip {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 12px;
  border: 1px solid var(--nav-border);
  border-radius: 100px;
  color: var(--nav-bright);
  background: var(--nav-dim);
}

.nav-chip.active {
  background: var(--nav-glow);
  border-color: var(--nav);
  color: var(--text);
}

/* Meta strip */
.nav-meta-strip {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--border);
  background: rgba(10,10,10,.7);
  backdrop-filter: blur(12px);
}

.nav-meta-item {
  padding: 20px 32px;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-meta-item:last-child { border-right: none; }

.nav-meta-label {
  font-size: 9px;
  letter-spacing: .18em;
  color: var(--text-dimmer);
  text-transform: uppercase;
}

.nav-meta-val {
  font-size: 14px;
  color: var(--text);
  font-weight: 400;
}

.nav-meta-sub {
  font-size: 11px;
  color: var(--text-dimmer);
}


/* ================================================================
   OVERVIEW IMAGE
================================================================ */
.nav-overview-image {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 48px;
}

.nav-overview-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--r-lg);
  object-fit: cover;
  filter: drop-shadow(0 32px 64px rgba(99,102,241,.18));
}


/* ================================================================
   WHAT IS NAVIGATOR — STATEMENT
================================================================ */
.nav-statement-section {
  padding: 100px 48px;
  max-width: 1080px;
  margin: 0 auto;
  position: relative;
}

.nav-section-tag {
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-dimmer);
  display: block;
  margin-bottom: 40px;
}

.nav-statement {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 36px);
  line-height: 1.45;
  letter-spacing: -.01em;
  color: var(--text-dimmer);
  margin-bottom: 56px;
}

.nav-stmt-hi {
  color: var(--text);
}

.nav-stmt-em {
  color: var(--text);
  font-weight: 400;
}

.nav-stmt-dim {
  color: var(--text-dimmer);
}

.nav-context-note {
  display: flex;
  gap: 20px;
  padding: 24px 28px;
  border: 1px solid var(--nav-border);
  border-radius: var(--r);
  background: var(--nav-dim);
  max-width: 720px;
}

.nav-context-icon {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--nav-glow);
  border: 1px solid var(--nav-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-context-note p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-dim);
}

.nav-context-note p + p { margin-top: 8px; }


/* ================================================================
   METRICS
================================================================ */
.nav-metrics-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  border: 1px solid var(--nav-border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--nav-border);
  margin-bottom: 80px;
}

.nav-metric {
  background: var(--bg2);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-metric-val {
  font-family: var(--serif);
  font-size: 40px;
  background: linear-gradient(135deg, var(--nav-bright), var(--nav-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
}

.nav-metric-key {
  font-size: 12px;
  color: var(--text-dim);
  letter-spacing: .04em;
}


/* ================================================================
   OBJECTIVES — Override rule color
================================================================ */
.nav-obj-rule {
  height: 2px;
  width: 60px;
  background: linear-gradient(90deg, var(--nav), var(--nav-cyan));
  margin-bottom: 32px;
}


/* ================================================================
   PROBLEM STATEMENT
================================================================ */
.nav-problem-block {
  max-width: 820px;
}

.nav-problem-lead {
  font-size: 20px;
  line-height: 1.7;
  color: var(--text);
  margin-bottom: 32px;
  font-weight: 300;
}

.nav-problem-sub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  border: 1px solid var(--nav-border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--nav-border);
}

.nav-problem-sub-item {
  background: var(--bg2);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.nav-problem-sub-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--nav-bright);
}

.nav-problem-sub-item p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}


/* ================================================================
   USERS & SCOPE
================================================================ */
.nav-users-grid {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: 48px;
  border: 1px solid var(--nav-border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg2);
  margin-top: 32px;
}

.nav-user-divider {
  background: var(--nav-border);
}

.nav-user-col {
  padding: 40px 36px;
}

.nav-user-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 36px;
}

.nav-user-icon {
  width: 48px; height: 48px;
  border-radius: var(--r);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nav-user-icon.ciso {
  background: rgba(99,102,241,.12);
  border: 1px solid rgba(99,102,241,.3);
}

.nav-user-icon.analyst {
  background: rgba(34,211,238,.08);
  border: 1px solid rgba(34,211,238,.25);
}

.nav-user-header h3 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 400;
  color: var(--text);
  line-height: 1.3;
}

.nav-user-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 24px;
  counter-reset: user-counter;
}

.nav-user-list li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  counter-increment: user-counter;
  padding-left: 28px;
  position: relative;
}

.nav-user-list li::before {
  content: "0" counter(user-counter);
  position: absolute;
  left: 0;
  top: 2px;
  font-size: 10px;
  color: var(--text-dimmer);
  letter-spacing: .06em;
}

.nav-user-list li strong {
  font-size: 13px;
  font-weight: 500;
  color: var(--nav-bright);
}

.nav-user-list li p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-dim);
}


/* ================================================================
   MOCKUP — Navigator theme overrides
================================================================ */
.nav-mockup-glow {
  position: relative;
}

.nav-mockup-glow::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: calc(var(--r-lg) + 1px);
  background: linear-gradient(135deg, var(--nav-border), rgba(34,211,238,.2));
  z-index: -1;
  filter: blur(6px);
  opacity: .6;
}

.nav-kg-badge {
  font-size: 9.5px;
  padding: 3px 8px;
  border: 1px solid var(--nav-border);
  border-radius: 100px;
  color: var(--nav-bright);
  letter-spacing: .06em;
}

.nav-user-bubble {
  max-width: 72%;
  padding: 10px 14px;
  border-radius: var(--r) var(--r) 2px var(--r);
  font-size: 12px;
  line-height: 1.55;
  background: rgba(99,102,241,.12);
  border: 1px solid var(--nav-border);
  color: var(--text);
}

.nav-ai-avatar {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(99,102,241,.15);
  border: 1px solid var(--nav-border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.nav-ai-bubble {
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 2px var(--r) var(--r) var(--r);
  padding: 10px 14px;
  max-width: 72%;
  font-size: 12px;
  line-height: 1.55;
}

.nav-ai-bubble p { margin-bottom: 8px; }
.nav-ai-bubble strong { color: var(--text); font-weight: 500; }
.nav-ai-bubble code {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 10px;
  background: rgba(99,102,241,.12);
  padding: 1px 5px;
  border-radius: 3px;
  color: var(--nav-bright);
}

.nav-hl { color: var(--nav-bright); }

.nav-source-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

.nav-stag {
  font-size: 9px;
  padding: 3px 7px;
  border: 1px solid var(--nav-border);
  border-radius: 3px;
  color: var(--nav-bright);
  letter-spacing: .04em;
  background: var(--nav-dim);
}

.nav-sugg-chip {
  font-size: 10px;
  padding: 5px 10px;
  border: 1px solid var(--nav-border);
  border-radius: 100px;
  background: var(--nav-dim);
  color: var(--nav-bright);
  white-space: nowrap;
  letter-spacing: .02em;
}

.nav-scope-pill {
  font-size: 9.5px;
  padding: 4px 10px;
  background: var(--nav-dim);
  border: 1px solid var(--nav-border);
  border-radius: 100px;
  color: var(--nav-bright);
  letter-spacing: .05em;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 5px;
}

.nav-send-btn {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--nav-dim);
  border: 1px solid var(--nav-border);
  color: var(--nav-bright);
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ================================================================
   KEY DESIGN DECISIONS
================================================================ */
.nav-decisions-header {
  display: flex;
  align-items: baseline;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.nav-decisions-heading {
  font-family: var(--serif);
  font-size: 32px;
  font-weight: 400;
  color: var(--text);
}

.nav-decisions-sub {
  font-size: 13px;
  color: var(--text-dimmer);
  letter-spacing: .02em;
}

.nav-decision-cards {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-decision-card {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--bg2);
  transition: background .2s;
}

.nav-decision-card:hover { background: var(--bg3); }

.nav-dc-title-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--nav-border);
  background: rgba(99,102,241,.05);
  border-top: 2px solid var(--nav);
}

.nav-dc-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: .01em;
}

.nav-dc-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--nav);
  box-shadow: 0 0 8px var(--nav);
}

.nav-dc-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--nav-border);
  border-top: 1px solid var(--nav-border);
}

.nav-dc-col {
  background: var(--bg2);
  padding: 24px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nav-decision-card:hover .nav-dc-col { background: var(--bg3); }

.nav-dc-col-label {
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-dimmer);
}

.nav-dc-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-dc-col ul li {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-dim);
  padding-left: 14px;
  position: relative;
}

.nav-dc-col ul li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--nav);
}


/* ================================================================
   WHAT WE PAUSED
================================================================ */
.nav-paused {
  margin-top: 48px;
}

.nav-paused-heading {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 12px;
}

.nav-paused-rule {
  height: 2px;
  width: 60px;
  background: linear-gradient(90deg, var(--nav), var(--nav-cyan));
  margin-bottom: 28px;
}

.nav-paused-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nav-paused-list li {
  font-size: 15px;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 12px;
}

.nav-paused-num {
  font-size: 10px;
  color: var(--nav);
  letter-spacing: .06em;
  min-width: 20px;
}


/* ================================================================
   TRUST SPECTRUM
================================================================ */
.nav-trust-block {
  padding: 36px 40px;
  border: 1px solid var(--nav-border);
  border-radius: var(--r);
  background: linear-gradient(135deg, rgba(99,102,241,.06) 0%, rgba(34,211,238,.03) 100%);
}

.nav-trust-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--nav-bright);
  display: block;
  margin-bottom: 20px;
}

.nav-trust-track {
  position: relative;
  height: 3px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 16px;
}

.nav-trust-fill {
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, var(--nav-dim), var(--nav));
  border-radius: 2px;
}

.nav-trust-marker {
  position: absolute;
  top: 50%;
  left: 30%;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--nav);
  border: 2px solid var(--bg2);
  box-shadow: 0 0 10px var(--nav);
}

.nav-trust-poles {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}

.nav-trust-pole {
  font-size: 11px;
  color: var(--text-dimmer);
  letter-spacing: .04em;
}

.nav-trust-pole.active { color: var(--nav-bright); }

.nav-trust-desc {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text-dim);
  max-width: 680px;
  border-top: 1px solid var(--nav-border);
  padding-top: 20px;
}


/* ================================================================
   OUTCOMES
================================================================ */
.nav-outcomes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  border: 1px solid var(--nav-border);
  border-radius: var(--r);
  overflow: hidden;
  background: var(--nav-border);
  margin-top: 80px;
}

.nav-outcome {
  background: var(--bg2);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.nav-out-val {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--text);
  line-height: 1.2;
}

.nav-out-label {
  font-size: 11px;
  color: var(--nav-bright);
  letter-spacing: .08em;
  text-transform: uppercase;
}


/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 900px) {
  .nav-hero-inner { padding: 96px 24px 48px; }
  .nav-hero-image { display: none; }
  .nav-meta-strip { grid-template-columns: 1fr 1fr; }
  .nav-statement-section { padding: 64px 24px; }
  .nav-metrics-row { grid-template-columns: repeat(2, 1fr); }
  .nav-users-grid { grid-template-columns: 1fr; }
  .nav-user-divider { display: none; }
  .nav-problem-sub { grid-template-columns: 1fr; }
  .nav-dc-body { grid-template-columns: 1fr; }
  .nav-outcomes { grid-template-columns: 1fr; }
  .nav-trust-poles { flex-direction: column; gap: 6px; }
  .nav-decisions-header { flex-direction: column; gap: 8px; }
}

@media (max-width: 640px) {
  .nav-hero-title { font-size: 44px; }
  .nav-meta-strip { grid-template-columns: 1fr 1fr; }
  .nav-metrics-row { grid-template-columns: repeat(2, 1fr); }
}