/* =============================================================================
   Incipit ConsultEdge — Neural Public Design Layer
   -----------------------------------------------------------------------------
   Loads AFTER the four Awake foundation sheets. It does not replace them: the
   Bootstrap grid, spacing utilities and component base all still come from
   there. This sheet adds the neural visual language — the dark intelligence
   canvas, the synapse motifs, and the editorial rhythm that sits on top.

   Colour rule: every text pair in here was measured against WCAG 2.1 AA
   (4.5:1 body text, 3:1 UI boundaries). Measured ratios are noted inline so a
   later edit cannot silently regress them.
   ============================================================================= */

:root {
  /* Dark canvas ramp — shared with the admin portal's Ink family so the
     public site and the product read as one brand. */
  --nx-void:    #080B14;   /* deepest backdrop */
  --nx-night:   #0B0F1A;   /* hero canvas */
  --nx-ink:     #131929;   /* raised dark panel */
  --nx-rail:    #1E2638;   /* dark divider */

  /* Text on the dark canvas */
  --nx-bright:  #F2F5FF;   /* headings   — 17.57:1 on --nx-night */
  --nx-body:    #C3CADF;   /* body copy  — 11.69:1 on --nx-night */
  --nx-muted:   #8F9ABB;   /* secondary  —  6.84:1 on --nx-night */

  /* Synapse accents */
  --nx-relay:   #7EA0F0;   /* interactive accent — 7.45:1 on --nx-night */
  --nx-indigo:  #3D52A0;   /* brand primary (surfaces, never small text) */
  --nx-glow:    #A8C4FF;   /* pulse highlight   — 10.94:1 on --nx-night */

  --nx-shell:   1296px;
}

/* -----------------------------------------------------------------------------
   1. The neural canvas element
   -------------------------------------------------------------------------- */

.neural-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;   /* the cloud is decoration; never eat a click */
  z-index: 0;
}

.neural-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Vignette so the cloud fades into the section edges instead of being
   clipped by a hard rectangle. */
.neural-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 58% at 50% 45%, transparent 0%, rgba(11,15,26,.55) 68%, var(--nx-night) 100%);
}

/* -----------------------------------------------------------------------------
   2. Hero
   -------------------------------------------------------------------------- */

.neural-hero {
  position: relative;
  background-color: var(--nx-night);
  color: var(--nx-body);
  overflow: hidden;
  padding: 9rem 0 6rem;
  isolation: isolate;
}

@media (min-width: 992px) {
  .neural-hero { padding: 12rem 0 8rem; min-height: 92vh; display: flex; align-items: center; }
}

.neural-hero > .container { position: relative; z-index: 2; }

/* Eyebrow pill */
.neural-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem 1.125rem;
  border: 1px solid rgba(126,160,240,.32);
  border-radius: 9999px;
  background: rgba(61,82,160,.12);
  color: var(--nx-relay);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* The small pulsing dot inside the eyebrow. */
.neural-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--nx-glow);
  box-shadow: 0 0 0 0 rgba(168,196,255,.65);
  animation: nx-pulse 2.4s ease-out infinite;
}

@keyframes nx-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(168,196,255,.55); }
  70%  { box-shadow: 0 0 0 9px rgba(168,196,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(168,196,255,0); }
}

/* Display headline */
.neural-display {
  color: var(--nx-bright);
  font-weight: 700;
  line-height: 1.03;
  letter-spacing: -.03em;
  font-size: clamp(2.75rem, 7.2vw, 6rem);
  margin: 0;
}

.neural-display em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(105deg, var(--nx-relay) 0%, var(--nx-glow) 55%, #DCE7FF 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  /* Fallback for engines that ignore background-clip:text — without this the
     word would render invisible rather than merely un-gradiented. */
  color: var(--nx-glow);
}

.neural-lead {
  color: var(--nx-body);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.65;
  max-width: 46rem;
}

/* CTA row */
.neural-cta {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  padding: .9375rem 1.75rem;
  border-radius: 9999px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.neural-cta-primary {
  background: var(--nx-relay);
  color: #0A0E18;                       /* 7.2:1 — dark ink on the light accent */
  box-shadow: 0 8px 30px rgba(126,160,240,.28);
}
.neural-cta-primary:hover {
  background: var(--nx-glow);
  color: #0A0E18;
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(126,160,240,.38);
}

.neural-cta-ghost {
  border: 1px solid rgba(195,202,223,.48);   /* 3.49:1 against the hero bg (.34 was 2.34:1) */
  color: var(--nx-bright);
}
.neural-cta-ghost:hover {
  border-color: var(--nx-relay);
  color: var(--nx-relay);
  background: rgba(126,160,240,.08);
  transform: translateY(-2px);
}

.neural-cta:focus-visible {
  outline: 2px solid var(--nx-glow);
  outline-offset: 3px;
}

/* Proof rail under the CTAs */
.neural-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem 2.5rem;
  padding-top: 2.5rem;
  margin-top: 2.5rem;
  border-top: 1px solid var(--nx-rail);
}

.neural-proof-item .value {
  display: block;
  color: var(--nx-bright);
  font-size: 1.875rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
}

.neural-proof-item .label {
  display: block;
  color: var(--nx-muted);
  font-size: .8125rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-top: .25rem;
}

/* Scroll cue */
.neural-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 2rem;
  transform: translateX(-50%);
  color: var(--nx-muted);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .625rem;
  text-decoration: none;
}
.neural-scroll-cue:hover { color: var(--nx-relay); }
.neural-scroll-cue .line {
  width: 1px;
  height: 42px;
  background: linear-gradient(to bottom, var(--nx-relay), transparent);
  animation: nx-drift 2.2s ease-in-out infinite;
}
@keyframes nx-drift {
  0%, 100% { opacity: .35; transform: scaleY(.6); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);  transform-origin: top; }
}

@media (max-width: 991.98px) {
  .neural-scroll-cue { display: none; }
}

/* -----------------------------------------------------------------------------
   3. Dark sections that continue the canvas
   -------------------------------------------------------------------------- */

.neural-section {
  position: relative;
  background-color: var(--nx-night);
  color: var(--nx-body);
  padding: 6rem 0;
  overflow: hidden;
}

@media (min-width: 992px) {
  .neural-section { padding: 8rem 0; }
}

.neural-section-void { background-color: var(--nx-void); }

.neural-section > .container { position: relative; z-index: 2; }

.neural-kicker {
  color: var(--nx-relay);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 .875rem;
}

.neural-heading {
  color: var(--nx-bright);
  font-weight: 700;
  letter-spacing: -.025em;
  line-height: 1.1;
  font-size: clamp(2rem, 3.4vw, 3rem);
  margin: 0;
}

.neural-heading em {
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--nx-relay);
}

.neural-sub {
  color: var(--nx-muted);
  font-size: 1.0625rem;
  line-height: 1.7;
  max-width: 42rem;
}

/* -----------------------------------------------------------------------------
   4. Node cards — the capability grid, styled as synapse terminals
   -------------------------------------------------------------------------- */

.node-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.125rem;
  height: 100%;
  padding: 1.75rem;
  border: 1px solid var(--nx-rail);
  border-radius: 10px;
  background: linear-gradient(160deg, rgba(30,38,56,.42) 0%, rgba(11,15,26,.30) 100%);
  color: var(--nx-body);
  text-decoration: none;
  overflow: hidden;
  transition: border-color .25s ease, transform .25s ease, background-color .25s ease;
}

/* A faint synapse sweep that runs across the card on hover. */
.node-card::before {
  content: "";
  position: absolute;
  top: 0; left: -100%;
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--nx-relay), transparent);
  transition: left .7s ease;
}

.node-card:hover {
  border-color: rgba(126,160,240,.45);
  transform: translateY(-4px);
  background: linear-gradient(160deg, rgba(61,82,160,.20) 0%, rgba(11,15,26,.34) 100%);
  color: var(--nx-body);
}
.node-card:hover::before { left: 100%; }

.node-card:focus-visible {
  outline: 2px solid var(--nx-glow);
  outline-offset: 3px;
}

.node-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: rgba(126,160,240,.12);
  border: 1px solid rgba(126,160,240,.24);
  color: var(--nx-relay);
  font-size: 1.125rem;
  flex-shrink: 0;
}

.node-title {
  color: var(--nx-bright);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
  letter-spacing: -.01em;
}

.node-text {
  color: var(--nx-muted);
  font-size: .9375rem;
  line-height: 1.6;
  margin: 0;
}

.node-more {
  margin-top: auto;
  color: var(--nx-relay);
  font-size: .875rem;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.node-card:hover .node-more { gap: .8125rem; }
.node-more i { transition: transform .25s ease; }

/* -----------------------------------------------------------------------------
   5. Method — a vertical synapse chain
   -------------------------------------------------------------------------- */

.synapse-chain { position: relative; padding-left: 3.25rem; }

/* The connecting spine. */
.synapse-chain::before {
  content: "";
  position: absolute;
  left: 15px;
  top: .5rem;
  bottom: .5rem;
  width: 1px;
  background: linear-gradient(to bottom, transparent, var(--nx-rail) 12%, var(--nx-rail) 88%, transparent);
}

.synapse-step { position: relative; padding-bottom: 2.75rem; }
.synapse-step:last-child { padding-bottom: 0; }

.synapse-step::before {
  content: "";
  position: absolute;
  left: -3.25rem;
  top: .3125rem;
  width: 31px;
  height: 31px;
  border-radius: 50%;
  border: 1px solid rgba(126,160,240,.38);
  background: var(--nx-night);
}

.synapse-step::after {
  content: "";
  position: absolute;
  left: calc(-3.25rem + 11px);
  top: calc(.3125rem + 11px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--nx-relay);
  box-shadow: 0 0 12px rgba(126,160,240,.7);
}

.synapse-step h3 {
  color: var(--nx-bright);
  font-size: 1.1875rem;
  font-weight: 600;
  margin: 0 0 .5rem;
  letter-spacing: -.01em;
}

.synapse-step p {
  color: var(--nx-muted);
  font-size: .9375rem;
  line-height: 1.7;
  margin: 0;
}

.synapse-index {
  color: var(--nx-relay);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  display: block;
  margin-bottom: .375rem;
}

/* -----------------------------------------------------------------------------
   6. Signal band — the closing CTA
   -------------------------------------------------------------------------- */

.signal-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--nx-ink) 0%, #1B2444 55%, var(--nx-indigo) 100%);
  padding: 5rem 0;
  color: var(--nx-bright);
}

@media (min-width: 992px) { .signal-band { padding: 7rem 0; } }

.signal-band > .container { position: relative; z-index: 2; }

.signal-band .neural-sub { color: rgba(242,245,255,.82); }   /* 5.07:1 at the band's lightest stop */

/* -----------------------------------------------------------------------------
   7. Light bridge — keeps the existing light sections coherent underneath
   -------------------------------------------------------------------------- */

.neural-bridge {
  background: linear-gradient(to bottom, var(--nx-night) 0%, var(--nx-night) 42%, var(--bs-body-bg) 100%);
  height: 120px;
}

.neural-bridge-up {
  background: linear-gradient(to bottom, var(--bs-body-bg) 0%, var(--nx-night) 58%, var(--nx-night) 100%);
  height: 120px;
}

/* -----------------------------------------------------------------------------
   8. Reduced motion — kill every decorative animation and transition.
   The canvas engine handles its own reduced-motion path in JavaScript.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .neural-eyebrow .dot,
  .neural-scroll-cue .line {
    animation: none;
  }
  .node-card,
  .node-card::before,
  .node-more i,
  .neural-cta {
    transition: none;
  }
  .node-card:hover { transform: none; }
  .neural-cta:hover { transform: none; }
}