/* ==========================================================================
   QubixLabs — Homepage Premium Polish
   Additive layer on top of qeds.build.css. Does not change layout, spacing
   rhythm, or page structure — only refines the navigation and the AI
   pipeline visualization to feel more premium. Loaded after qeds.build.css
   so these rules win the cascade at equal specificity.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Header nav link spacing
   .qx-header-nav uses justify-content:space-between across 3 children
   (logo / links wrapper / actions). Because the links wrapper only sized
   itself to its tightly-packed content (gap-1 = 0.25rem), all the leftover
   header-bar width piled up as blank margin on either side of that block —
   the "huge empty space left and right of the links" — instead of showing
   up between the links themselves. Letting the wrapper grow to fill the
   remaining middle space and centering its own children with a generous
   gap turns that same space into breathing room between the links, while
   leaving the header's overall geometry (logo left, actions right)
   untouched.
   -------------------------------------------------------------------------- */
.qx-header-nav > div.hidden.lg\:flex {
  flex: 1 1 auto;
  justify-content: center;
  gap: clamp(1.5rem, 2.4vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   1. Premium navigation pills
   -------------------------------------------------------------------------- */
.qx-header-nav .nav-pill {
  position: relative;
  padding: .5rem 1rem;
  background: linear-gradient(180deg, hsla(0,0%,100%,.05), hsla(0,0%,100%,.015));
  border: 1px solid var(--qeds-color-line);
  box-shadow: inset 0 1px 0 hsla(0,0%,100%,.04);
  transition: transform .25s var(--qeds-ease-standard),
              border-color .25s ease,
              background .25s ease,
              box-shadow .3s ease;
}

/* The base stylesheet already uses .nav-link:before for its hover-sweep
   fill and .nav-link:after for the underline indicator. Rather than add a
   competing pseudo-element (properties don't merge across rules of
   different specificity — only the highest-specificity declaration per
   property wins, which would split the transition and cause a jump), this
   layer fully re-declares :before for .nav-pill so the gradient-ring
   behavior is self-contained and nothing bleeds in from the base rule. */
.qx-header-nav .nav-pill:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(120deg, var(--qeds-color-blue), var(--qeds-color-cyan), var(--qeds-color-violet));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transform: none;
  transition: opacity .3s ease;
}

.qx-header-nav .nav-pill:hover {
  transform: translateY(-2px);
  border-color: rgba(34,229,216,.45);
  background: linear-gradient(180deg, rgba(34,229,216,.16), rgba(59,110,245,.09));
  box-shadow: 0 10px 26px -12px rgba(34,229,216,.5), 0 0 0 1px rgba(34,229,216,.22);
}

/* Light mode needs its own tint — the dark-mode cyan fill reads as barely-there
   on a white header, so this swaps to a stronger blue that still comes from
   the existing palette rather than introducing a new accent color. */
html.light .qx-header-nav .nav-pill:hover {
  border-color: rgba(59,110,245,.4);
  background: linear-gradient(180deg, rgba(59,110,245,.14), rgba(34,229,216,.08));
  box-shadow: 0 10px 22px -14px rgba(59,110,245,.35), 0 0 0 1px rgba(59,110,245,.2);
}

.qx-header-nav .nav-pill:hover:before {
  opacity: 1;
}

/* Active page — stronger glass + persistent gradient ring, no solid fill */
.qx-header-nav .nav-pill.active {
  background: linear-gradient(180deg, hsla(0,0%,100%,.1), hsla(0,0%,100%,.03)) !important;
  color: var(--qeds-color-text) !important;
  border-color: transparent !important;
  font-weight: 600;
  box-shadow: 0 8px 22px -12px rgba(34,229,216,.5), inset 0 1px 0 hsla(0,0%,100%,.08);
}

.qx-header-nav .nav-pill.active:before {
  opacity: .85;
}

/* Reuses the existing .qx-proximity spotlight (auto-applied via JS) — see
   foundation.js — but tightens the radius so it reads as a pill glow, not
   a room-sized wash. Targets the proximity library's own pseudo-element,
   which is :before on .qx-proximity; since .nav-pill:before above already
   claims :before for the same element, this selector's higher specificity
   (three classes vs. two) makes it win purely for the background-image
   swap, layering the cursor-tracked glow into the same masked ring. */
.qx-header-nav .nav-pill.qx-proximity:before {
  background: radial-gradient(120px circle at var(--mx,50%) var(--my,50%), rgba(34,229,216,.16), transparent 70%),
              linear-gradient(120deg, var(--qeds-color-blue), var(--qeds-color-cyan), var(--qeds-color-violet));
}

/* Mobile drawer links — light glass treatment on hover, no pill shape
   (kept flush with the drawer's block layout) */
.nav-link-mobile {
  transition: background .2s ease, color .2s ease, padding-left .2s ease;
}
.nav-link-mobile:hover {
  background: hsla(0,0%,100%,.05);
  padding-left: 1rem;
}
.nav-link-mobile.active {
  background: linear-gradient(90deg, rgba(59,110,245,.14), rgba(34,229,216,.08));
  color: var(--qeds-color-text);
  font-weight: 600;
  box-shadow: inset 2px 0 0 var(--qeds-color-cyan);
}

@media (prefers-reduced-motion: reduce) {
  .qx-header-nav .nav-pill,
  .qx-header-nav .nav-pill::before {
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   2. Pipeline stage color hierarchy (Enhancement 2)
   Re-maps each lane to a distinct semantic accent so the four format
   pipelines read as separate intelligent workflows at a glance.
   -------------------------------------------------------------------------- */
.pipeline-lane[data-lane="pdf"]     { --lane: #22e5d8; --lane-soft: rgba(34,229,216,.12); --lane-border: rgba(34,229,216,.28); }   /* OCR — cyan */
.pipeline-lane[data-lane="jsonxml"] { --lane: #22c55e; --lane-soft: rgba(34,197,94,.12); --lane-border: rgba(34,197,94,.28); }    /* structured docs — emerald */
.pipeline-lane[data-lane="csvxlsx"] { --lane: #f5a524; --lane-soft: rgba(245,165,36,.12); --lane-border: rgba(245,165,36,.28); }   /* bulk ingestion — orange */
.pipeline-lane[data-lane="archive"] { --lane: #9b6bff; --lane-soft: rgba(155,107,255,.12); --lane-border: rgba(155,107,255,.28); }  /* historical intelligence — violet */

/* Light-mode contrast fix (Phase 4E, Part 1/8) — see rule comment above */
html.light .pipeline-lane[data-lane="pdf"]     { --lane: #0e7c74; }
html.light .pipeline-lane[data-lane="jsonxml"] { --lane: #047857; }
html.light .pipeline-lane[data-lane="csvxlsx"] { --lane: #b45309; }
html.light .pipeline-lane[data-lane="archive"] { --lane: #7c3aed; }

/* Resting-state border now carries the lane's own color (not just the top
   accent strip), so each of the four parallel pipelines reads as its own
   distinct workflow even before the user hovers. Hover deepens it further. */
.pipeline-lane {
  border-color: var(--lane-border, var(--qeds-color-line));
  will-change: transform;
}
.pipeline-lane:hover {
  transform: translateY(-5px) scale(1.025);
  border-color: var(--lane);
}

/* Per-stage dots inside each lane's step list — gives every processing
   stage its own identity instead of inheriting the lane color uniformly */
.pipeline-steps li[data-node]::before { background: var(--node-color); box-shadow: 0 0 0 3px var(--qeds-color-void), 0 0 8px 1px var(--node-color); }
.pipeline-steps li[data-node="ocr"]        { --node-color: #22e5d8; }
.pipeline-steps li[data-node="extract"]    { --node-color: #9b6bff; }
.pipeline-steps li[data-node="ai"]         { --node-color: #3b6ef5; }
.pipeline-steps li[data-node="knowledge"]  { --node-color: #22e5d8; font-weight: 600; }
.pipeline-steps li[data-node="knowledge"]::before { box-shadow: 0 0 0 3px var(--qeds-color-void), 0 0 12px 3px var(--node-color); }
.pipeline-steps li[data-node="validation"] { --node-color: #22c55e; }
.pipeline-steps li[data-node="rules"]      { --node-color: #f5a524; }

/* --------------------------------------------------------------------------
   3. Stage-1/3 architecture nodes — semantic accents (Upload, Router, ERP,
      Notification, Analytics) so the always-visible summary diagram carries
      the same visual hierarchy as the expanded pipeline detail.

   Border weight now maps to role, at rest (not just on :hover), so the
   diagram is legible at a glance:
     Tier 1  Router          — animated conic gradient ring + cyan halo (arch-node-router, unchanged, strongest)
     Tier 1  ERP              — static gradient ring + halo (arch-node-erp below, second strongest)
     Tier 2  Upload            — solid tinted border, moderate halo (first decision point)
     Tier 2  Notification/Analytics — solid tinted border, lighter halo (terminal outputs)
     Tier 3  User (no accent)  — plain neutral border (entry marker only)
   -------------------------------------------------------------------------- */
.arch-node[data-accent] {
  transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}

.arch-node[data-accent="blue"] {
  border-color: rgba(59,110,245,.4);
  box-shadow: 0 0 0 1px rgba(59,110,245,.05), 0 0 26px -16px rgba(59,110,245,.55);
}
.arch-node[data-accent="blue"]:hover  { border-color: rgba(59,110,245,.65); box-shadow: 0 0 30px -12px rgba(59,110,245,.55); }

.arch-node[data-accent="teal"],
.arch-node[data-accent="cyan"] {
  border-color: rgba(34,229,216,.32);
  box-shadow: 0 0 0 1px rgba(34,229,216,.04), 0 0 22px -16px rgba(34,229,216,.5);
}
.arch-node[data-accent="teal"]:hover,
.arch-node[data-accent="cyan"]:hover { border-color: rgba(34,229,216,.55); box-shadow: 0 0 30px -12px rgba(34,229,216,.5); }

/* ERP node — the other convergence point besides the Router, so it earns a
   quiet static gradient ring (no pulse — that stays reserved for Router),
   plus a soft ambient halo so it visibly outranks Upload/Notification/Analytics.
   Bumped further per feedback: thicker ring, slow independent breathing glow
   (distinct cadence/amplitude from the Router's pulse so the two don't read
   as identical), and the ORACLE · PEOPLESOFT · SAP · DYNAMICS tag now picks
   up its own gradient treatment instead of the default muted mono label. */
.arch-node-erp {
  position: relative;
  isolation: isolate;
  box-shadow: 0 0 0 1px rgba(155,107,255,.14), 0 0 60px -16px rgba(155,107,255,.6), 0 0 36px -18px rgba(59,110,245,.5);
  animation: qeds-erp-breathe 4.2s ease-in-out infinite;
}
.arch-node-erp::before {
  content: "";
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: inherit;
  padding: 2px;
  background: linear-gradient(120deg, var(--qeds-color-blue), var(--qeds-color-violet), var(--qeds-color-cyan));
  opacity: .85;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.arch-node-erp .arch-node-tag {
  background: linear-gradient(100deg, #8eb0ff, #c4a8ff 55%, var(--qeds-color-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 600;
  letter-spacing: .04em;
}
@keyframes qeds-erp-breathe {
  0%, 100% { box-shadow: 0 0 0 1px rgba(155,107,255,.14), 0 0 60px -16px rgba(155,107,255,.6), 0 0 36px -18px rgba(59,110,245,.5); }
  50%      { box-shadow: 0 0 0 1px rgba(155,107,255,.22), 0 0 72px -14px rgba(155,107,255,.75), 0 0 44px -16px rgba(59,110,245,.6); }
}
@media (prefers-reduced-motion: reduce) {
  .arch-node-erp { animation: none; }
}

/* --------------------------------------------------------------------------
   4. Animated flow particles along the fan-out / fan-in connectors
   -------------------------------------------------------------------------- */
.arch-flow-particle {
  fill: var(--qeds-color-cyan);
  opacity: .9;
}

@media (prefers-reduced-motion: reduce) {
  .arch-flow-particle { display: none; }
}

/* --------------------------------------------------------------------------
   5. AI Solutions Ecosystem — Intelligence Map (id="ai-solutions")
   Adds a "violet" accent to the shared .arch-node system (Decision AI
   category) using the exact same pattern as the existing blue/teal
   accents above, plus compact sizing for the six leaf nodes so a 6-arm
   fan-out reads clearly at the same visual weight as the 4-lane pipeline
   diagram it's modeled on.
   -------------------------------------------------------------------------- */
.arch-node[data-accent="violet"] {
  border-color: rgba(155,107,255,.38);
  box-shadow: 0 0 0 1px rgba(155,107,255,.05), 0 0 26px -16px rgba(155,107,255,.55);
}
.arch-node[data-accent="violet"]:hover {
  border-color: rgba(155,107,255,.6);
  box-shadow: 0 0 30px -12px rgba(155,107,255,.55);
}

.im-leaf {
  min-width: 0;
  width: 100%;
  padding: .8rem 1rem;
}
.im-leaf .arch-node-tag {
  font-size: .6rem;
}

/* --------------------------------------------------------------------------
   6. Permanent fixed header — Phase 2
   Hide-on-scroll has been removed entirely (see foundation.js for the root
   cause). `.qx-header` is never translated and carries no transform
   transition, so its screen position cannot change during scroll under any
   circumstance. Only the pre-existing `.qx-header--solid` background/
   shadow/padding refinement (defined in qeds.build.css) still runs.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   7. Focus-visible contrast fix — Phase 4
   qeds.build.css sets a single global `:focus-visible` outline in the brand
   cyan. Against the dark theme's near-black background that clears WCAG
   1.4.11 (non-text contrast) easily, but against the light theme's
   near-white background (--qeds-color-void: #f5f7fc) cyan falls under the
   required 3:1 ratio. Swap to the light theme's near-black text color for
   that context only — dark theme is untouched, no layout or geometry
   change, keyboard focus is still clearly visible everywhere.
   -------------------------------------------------------------------------- */
html.light :focus-visible {
  outline-color: var(--qeds-color-text);
}

/* --------------------------------------------------------------------------
   8. Founder hero card — Phase 4C
   Hand-written layout rules (not Tailwind utility classes) on purpose: the
   qeds.build.css bundle is a pre-built, scanned-at-build-time Tailwind
   output, and it does not contain most `lg:`-prefixed or arbitrary-value
   utilities beyond the small set already used elsewhere on the site
   (confirmed by inspecting the compiled CSS directly — e.g. no lg:mx-0,
   lg:w-full, lg:text-left, lg:justify-start, lg:self-end, px-8, or the
   lg:grid-cols-[19rem_1fr] the previous founder hero relied on). Writing new
   HTML with unverified arbitrary/responsive utility classes would silently
   fail to apply on this static build. This component's layout is therefore
   self-contained CSS so the photo/content composition is guaranteed to work
   at every breakpoint regardless of what the Tailwind scan captured.
   -------------------------------------------------------------------------- */
.founder-card {
  display: flex;
  flex-direction: column;
  border-radius: 2.5rem;
  /* Was an opaque near-black panel (var(--qeds-glass-solid-bg) inline on the
     element) that separated too strongly from the page. This translucent
     overlay only lightens whatever's beneath it slightly, so the card reads
     as part of the page in both themes; separation comes from the existing
     border-line border plus the soft ambient glow below, not from darkness. */
  background: linear-gradient(180deg, hsla(0,0%,100%,.05), hsla(0,0%,100%,.015));
  box-shadow: 0 28px 60px -36px rgba(59,110,245,.35), 0 0 46px -30px rgba(34,229,216,.25);
}
.founder-card__photo {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 2.5rem 2rem 0;
}
.founder-card__photo-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(ellipse 65% 70% at 50% 40%, rgba(34,229,216,.16), transparent 72%);
}
.founder-card__photo img {
  position: relative;
  z-index: 1;
  width: 13rem;
  height: auto;
  object-fit: contain;
  filter: drop-shadow(0 35px 45px rgba(0,0,0,.5));
}
.founder-card__content {
  padding: 2rem 2rem 2.75rem;
  text-align: center;
}
@media (min-width: 640px) {
  .founder-card__photo img { width: 15.5rem; }
}
@media (min-width: 1024px) {
  .founder-card {
    flex-direction: row;
    align-items: center;
  }
  .founder-card__photo {
    flex: 0 0 24rem;
    justify-content: flex-start;
    align-self: stretch;
    align-items: flex-end;
    padding: 0 0 0 3rem;
  }
  .founder-card__photo img { width: 100%; max-width: 19rem; }
  .founder-card__content {
    flex: 1;
    text-align: left;
    padding: 3.5rem 3rem 3.5rem 2.5rem;
  }
  .founder-card__actions,
  .founder-card__badge { justify-content: flex-start; }
}
.founder-card__badge,
.founder-card__actions {
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   Corporate Network / Particle Effects v1.0
   1) Hero network canvas (#particles) - calm, masked, capped at 0.4 opacity
   2) Card network canvas (.card-network) - subtle per-card node hint
   ========================================================================== */
#particles {
  /* Opacity is also set via the opacity-40 utility class in markup;
     restated here (without !important) as a safety net in case that
     class is ever dropped, since >0.4 is out of spec for this effect. */
  opacity: 0.4;
  mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at center, black 60%, transparent 100%);
}

.card-network-host {
  position: relative;
  /* Creates a new stacking context so the canvas's negative z-index
     stays contained here rather than escaping to a further ancestor -
     this keeps all existing card content (including any already-
     absolutely-positioned decorative elements) safely above the canvas
     with no need to touch their positioning. */
  isolation: isolate;
}
canvas.card-network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: 0.15;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.card-network-host:hover canvas.card-network {
  opacity: 0.3;
}

@media (prefers-reduced-motion: reduce) {
  #particles,
  canvas.card-network {
    display: none;
  }
}