
/* NIX dashboard density and collapsible sidebar polish. */
@media (min-width: 768px) {
  [data-slot="sidebar-wrapper"] {
    --sidebar-width: 14.5rem !important;
    --sidebar-width-icon: 4.25rem !important;
  }

  [data-slot="sidebar"][data-state="collapsed"][data-collapsible="offcanvas"] > div:first-child {
    width: var(--sidebar-width-icon) !important;
  }

  [data-slot="sidebar"][data-state="collapsed"][data-collapsible="offcanvas"] > div:nth-child(2) {
    left: 0 !important;
    width: var(--sidebar-width-icon) !important;
    border-right: 1px solid hsl(var(--sidebar-border)) !important;
  }

  [data-slot="sidebar"][data-state="collapsed"] [data-sidebar="header"] {
    padding: .75rem .5rem !important;
  }

  [data-slot="sidebar"][data-state="collapsed"] [data-sidebar="header"] a {
    gap: .25rem !important;
  }

  [data-slot="sidebar"][data-state="collapsed"] [data-sidebar="header"] a > div:last-child,
  [data-slot="sidebar"][data-state="collapsed"] [data-sidebar="group-label"],
  [data-slot="sidebar"][data-state="collapsed"] [data-sidebar="menu-button"] span,
  [data-slot="sidebar"][data-state="collapsed"] [data-sidebar="menu-button"] svg:last-child,
  [data-slot="sidebar"][data-state="collapsed"] [data-sidebar="menu-sub-item"],
  [data-slot="sidebar"][data-state="collapsed"] [data-sidebar="menu-sub"] {
    display: none !important;
  }

  [data-slot="sidebar"][data-state="collapsed"] [data-sidebar="menu-button"] {
    height: 2.5rem !important;
    justify-content: center !important;
    padding: 0 !important;
  }

  [data-slot="sidebar"][data-state="collapsed"] [data-sidebar="menu-button"] > div {
    justify-content: center !important;
  }

  [data-slot="sidebar"] [data-sidebar="content"] {
    padding-bottom: 5rem !important;
  }

  [data-slot="sidebar"] [data-sidebar="group"] {
    padding: .2rem .55rem !important;
  }

  [data-slot="sidebar"] [data-sidebar="group-label"] {
    height: 1.55rem !important;
    color: #b8860b !important;
    font-size: .68rem !important;
    font-weight: 900 !important;
    letter-spacing: .12em !important;
  }

  [data-slot="sidebar"] [data-sidebar="menu"] {
    gap: .125rem !important;
  }

  [data-slot="sidebar"] [data-sidebar="menu-button"],
  [data-slot="sidebar"] a[href][class*="rounded-md"] {
    color: hsl(var(--sidebar-foreground) / .84) !important;
    font-size: .82rem !important;
    line-height: 1.15rem !important;
  }

  [data-slot="sidebar"] [data-sidebar="menu-button"]:hover,
  [data-slot="sidebar"] a[href][class*="rounded-md"]:hover {
    color: hsl(var(--sidebar-accent-foreground)) !important;
  }

  main.min-w-0.flex-1 {
    padding: 1.25rem 1.5rem !important;
  }
}

.fade-in {
  max-width: 1500px !important;
  padding: 0 !important;
}

.fade-in > .border-b {
  padding-bottom: .75rem !important;
  margin-bottom: .25rem !important;
}

.fade-in h1 {
  font-size: clamp(2rem, 3vw, 3rem) !important;
  line-height: 1.02 !important;
}

.fade-in .rounded-2xl {
  border-radius: .85rem !important;
}

.fade-in .p-5,
.fade-in .sm\:p-6 {
  padding: 1rem !important;
}

.fade-in .gap-4 {
  gap: .75rem !important;
}

.fade-in .space-y-4 > :not([hidden]) ~ :not([hidden]) {
  margin-top: .75rem !important;
}

.fade-in .h-\\[300px\\] {
  height: 260px !important;
}

.fade-in .h-\\[285px\\] {
  height: 250px !important;
}

.fade-in .h-\\[380px\\] {
  height: 330px !important;
}

.fade-in canvas {
  max-height: 220px !important;
}

@media (min-width: 1280px) {
  .fade-in .lg\:grid-cols-12 {
    grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  }
}


/* ============ LANDING HERO: full-bleed cover image (2026-08-19) ============ */
#home {
  background: url(/images/nixx.jpg) center / cover no-repeat !important;
}
#home::before {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(100deg, rgba(12,10,9,.88) 20%, rgba(12,10,9,.60) 55%, rgba(12,10,9,.38) 100%) !important;
  pointer-events: none !important;
}
/* hide the right-column image card; its badge floats over the photo */
/* readable text over photo */
#home h1 { color: #fff !important; }
#home .reveal p { color: rgba(255,255,255,.84) !important; }
#home .text-muted { color: rgba(255,255,255,.62) !important; }
#home .font-serif { color: #fff !important; }
#home .border-line, #home .border-t { border-color: rgba(255,255,255,.18) !important; }

/* ============ ASSETLUX THEME on landing (dark navy #131921 + gold #d4af37) (2026-08-19) ============ */
/* Header (landing only: header directly before section#home) */
header:has(+ section#home) {
  background: #131921 !important;
  border-bottom: 1px solid rgba(212,175,55,.28) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.25) !important;
}
/* logo mark -> gold gradient */
header:has(+ section#home) .h-9.w-9.rounded-lg.bg-ink {
  background: linear-gradient(135deg,#d4af37,#b8860b) !important;
  color: #131921 !important;
}
/* brand name + gold uppercase subline */
header:has(+ section#home) .text-xl { color: #fff !important; }
header:has(+ section#home) .text-muted {
  color: #d4af37 !important;
  letter-spacing: 2px !important;
  text-transform: uppercase !important;
  font-weight: 700 !important;
}
/* desktop nav links */
header:has(+ section#home) nav { color: rgba(255,255,255,.78) !important; }
header:has(+ section#home) nav button:hover { color: #f4d03f !important; }
/* Log in link */
header:has(+ section#home) a[class*='text-ink\/80'],
header:has(+ section#home) a.text-ink\/80 {
  color: rgba(255,255,255,.8) !important;
}
header:has(+ section#home) a[class*='text-ink\/80']:hover { color: #f4d03f !important; background: rgba(212,175,55,.12) !important; }
/* Get started -> gold gradient */
header:has(+ section#home) a[class*='bg-ink'] {
  background: linear-gradient(135deg,#d4af37,#b8860b) !important;
  color: #131921 !important;
  font-weight: 700 !important;
}
header:has(+ section#home) a[class*='bg-ink']:hover {
  background: linear-gradient(135deg,#f4d03f,#d4af37) !important;
}
/* hamburger */
header:has(+ section#home) button.lg\:hidden {
  border-color: rgba(212,175,55,.5) !important;
  color: #fff !important;
}
/* mobile menu panel */
header:has(+ section#home) > div.lg\:hidden {
  background: #232f3e !important;
  border-top: 1px solid rgba(212,175,55,.25) !important;
}
header:has(+ section#home) > div.lg\:hidden button { color: rgba(255,255,255,.85) !important; }
header:has(+ section#home) > div.lg\:hidden a[class*='border-line'] {
  border-color: rgba(212,175,55,.4) !important;
  color: #fff !important;
}
header:has(+ section#home) > div.lg\:hidden a[class*='bg-ink'] {
  background: linear-gradient(135deg,#d4af37,#b8860b) !important;
  color: #131921 !important;
  font-weight: 700 !important;
}

/* Hero accents in AssetLux gold */
#home .inline-flex.items-center.gap-2.mb-5 {
  color: #d4af37 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
}
#home .bg-accent { background-color: #d4af37 !important; }
/* primary CTA -> gold gradient */
#home button[class*='bg-ink'] {
  background: linear-gradient(135deg,#d4af37,#b8860b) !important;
  color: #131921 !important;
  font-weight: 700 !important;
}
#home button[class*='bg-ink']:hover {
  background: linear-gradient(135deg,#f4d03f,#d4af37) !important;
}
/* CBC badge card gold rim */

/* built bundle uses text-ash for the hero eyebrow */
#home .text-ash { color: #d4af37 !important; letter-spacing: 3px !important; text-transform: uppercase !important; font-weight: 600 !important; }

/* bundle uses bg-brand for accent dots */
#home .bg-brand, header:has(+ section#home) .bg-brand { background-color: #d4af37 !important; }


/* ============ ASSETLUX THEME: landing sections + footer (2026-08-19) ============ */
/* section eyebrow labels ("01 — Features" etc.) in AssetLux gold */
#features .text-brand, #pricing .text-brand, #contact .text-brand {
  color: #d4af37 !important;
  letter-spacing: 3px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
/* brand-tinted icon wells -> gold tint */
#features .bg-brand\/15, #pricing .bg-brand\/15, #contact .bg-brand\/15 {
  background: rgba(212,175,55,.15) !important;
  color: #b8860b !important;
}
/* feature-card icon boxes hover: ink -> gold gradient */
#features .group:hover .group-hover\:bg-ink {
  background: linear-gradient(135deg,#d4af37,#b8860b) !important;
  color: #131921 !important;
}
/* AssetLux asset-card signature: gold top rim on hover */
#features .group:hover { box-shadow: inset 0 3px 0 0 #d4af37 !important; }
/* portal icon boxes: solid navy with gold icon */
#features .bg-ink.text-paper { background: #131921 !important; color: #d4af37 !important; }
/* pricing cards: gold top rim (AssetLux premium border) */
#pricing .rounded-xl.border { border-top: 3px solid #d4af37 !important; }
/* landing section CTAs (bg-ink) -> gold gradient */
#features a[class*='bg-ink'], #pricing a[class*='bg-ink'], #contact a[class*='bg-ink'],
#features button[class*='bg-ink'], #pricing button[class*='bg-ink'], #contact button[class*='bg-ink'] {
  background: linear-gradient(135deg,#d4af37,#b8860b) !important;
  color: #131921 !important;
  font-weight: 700 !important;
}
#features a[class*='bg-ink']:hover, #pricing a[class*='bg-ink']:hover, #contact a[class*='bg-ink']:hover,
#features button[class*='bg-ink']:hover, #pricing button[class*='bg-ink']:hover, #contact button[class*='bg-ink']:hover {
  background: linear-gradient(135deg,#f4d03f,#d4af37) !important;
}
/* footer: AssetLux navy + gold rim */
footer.bg-ink { background: #131921 !important; border-top: 3px solid #d4af37 !important; }
footer a:hover { color: #f4d03f !important; }
footer .text-paper\/50, footer .text-paper\/60 { color: rgba(255,255,255,.6) !important; }

/* ============ ASSETLUX pricing polish (2026-08-19) ============ */
/* POPULAR badge + Professional CTA: green brand -> gold gradient */
#pricing a.bg-brand, #pricing button.bg-brand, #pricing span.bg-brand {
  background: linear-gradient(135deg,#d4af37,#b8860b) !important;
  color: #131921 !important;
  font-weight: 700 !important;
}
#pricing a.bg-brand:hover, #pricing button.bg-brand:hover {
  background: linear-gradient(135deg,#f4d03f,#d4af37) !important;
}
/* highlighted plan card: dark ink -> AssetLux navy */
#pricing div[class*='bg-ink'] { background: #131921 !important; }

/* POPULAR badge renders as div in bundle */
#pricing div.bg-brand { background: linear-gradient(135deg,#d4af37,#b8860b) !important; color: #131921 !important; font-weight: 700 !important; }

/* ============ Hero proof elements moved to features (2026-08-19) ============ */
#hero-proof-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2.25rem;
  width: 100%;
  margin: 0 auto 3.5rem;
}
#hero-proof-strip [data-cbc-badge] {
  position: static !important;
  margin-left: auto;
  border: 1px solid rgba(212,175,55,.45) !important;
}
#hero-proof-strip .grid { flex: 1 1 100%; margin-top: 0 !important; }
/* proof-strip text sits on the hero photo (2026-08-20) */
#hero-proof-strip .text-ink { color: rgba(255,255,255,.9) !important; }
#hero-proof-strip [data-cbc-badge] .text-ink { color: #14110f !important; }
#hero-proof-strip [data-cbc-badge] .text-muted { color: #8a8378 !important; }
/* hero right column is empty once the badge moves out */


/* ============ MOBILE LANDING POLISH (2026-08-19) ============ */
/* 1 · Hamburger -> slide-in left drawer covering ~1/3 of the screen */
@media (max-width: 1023px) {
  header:has(+ section#home) > div.lg\:hidden {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 33vw !important;
    min-width: 260px !important;
    height: 100dvh !important;
    z-index: 60 !important;
    padding-top: 4.5rem !important;
    box-shadow: 10px 0 32px rgba(0,0,0,.45) !important;
    animation: nixDrawerIn .25s ease-out !important;
  }
  header:has(+ section#home) > div.lg\:hidden nav { gap: .35rem !important; }
}
@keyframes nixDrawerIn { from { transform: translateX(-100%); } to { transform: translateX(0); } }

/* 2 · Hero on phones: inline compact buttons, tighter text */
@media (max-width: 767px) {
  #home .flex-col.sm\:flex-row { flex-direction: row !important; gap: .6rem !important; }
  #home .flex-col.sm\:flex-row button {
    min-height: 42px !important;
    padding: 8px 14px !important;
    font-size: 11.5px !important;
    white-space: nowrap !important;
  }
  #home h1 { font-size: 1.85rem !important; line-height: 1.12 !important; }
  #home .reveal p { font-size: .85rem !important; line-height: 1.55 !important; }
  #home .inline-flex.items-center.gap-2.mb-5 { font-size: .62rem !important; letter-spacing: 2px !important; }
}

/* 3 · Sections: two-column grids on phones */
@media (max-width: 767px) {
  #features .grid.border-t, #pricing .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  #features .reveal.p-7, #features .reveal.p-8, #features .reveal.md\:p-10 { padding: 1rem !important; }
  #features .reveal h3 { font-size: 1.1rem !important; }
  #features .reveal p { font-size: .72rem !important; }
  #features .reveal ul { font-size: .7rem !important; }
  #pricing .rounded-xl.border { padding: 1rem !important; }
  #pricing .font-serif.text-3xl, #pricing .font-serif.text-2xl { font-size: 1.25rem !important; }
  #pricing li, #pricing .text-sm { font-size: .7rem !important; }
  #pricing a[class*='bg-ink'], #pricing a.bg-brand, #pricing button.bg-brand { font-size: 11px !important; padding: 9px 10px !important; }
  #hero-proof-strip { gap: 1rem !important; }
  #hero-proof-strip [data-cbc-badge] { margin-left: 0 !important; }
}

/* ============ Contact sub-header strip (2026-08-19) ============ */
#nix-contact-strip {
  background: #0d1520;
  border-top: 1px solid rgba(212,175,55,.22);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  padding: .45rem 1rem;
  font-size: .78rem;
  font-weight: 500;
}
#nix-contact-strip a { color: rgba(255,255,255,.88); text-decoration: none; }
#nix-contact-strip a:hover { color: #f4d03f !important; }
@media (max-width: 767px) {
  #nix-contact-strip { font-size: .66rem; gap: .8rem; padding: .32rem .5rem; }
}

/* ============ Contact strip: 3 zones (contacts | search | socials) (2026-08-20) ============ */
#nix-contact-strip { justify-content: space-between !important; gap: 1rem !important; }
#nix-contact-strip .nst-left { display: flex; gap: 1.2rem; align-items: center; white-space: nowrap; }
#nix-contact-strip .nst-center { flex: 1; display: flex; justify-content: center; }
#nix-contact-strip input {
  width: min(420px, 100%);
  background: #232f3e;
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 20px;
  padding: .38rem 1rem;
  color: #fff;
  font-size: .75rem;
  outline: none;
}
#nix-contact-strip input:focus { border-color: #d4af37; }
#nix-contact-strip input::placeholder { color: rgba(255,255,255,.4); }
#nix-contact-strip .nst-right { display: flex; gap: .55rem; align-items: center; }
#nix-contact-strip .nst-right a {
  display: flex; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(212,175,55,.15); align-items: center; justify-content: center;
  transition: background .2s;
}
#nix-contact-strip .nst-right svg { width: 12px; height: 12px; fill: #d4af37; }
#nix-contact-strip .nst-right a:hover { background: #d4af37; }
#nix-contact-strip .nst-right a:hover svg { fill: #131921; }
@media (max-width: 900px) {
  #nix-contact-strip { flex-wrap: wrap; row-gap: .4rem; }
  #nix-contact-strip .nst-center { order: 3; flex-basis: 100%; }
}
@media (max-width: 767px) {
  #nix-contact-strip .nst-left { font-size: .6rem; gap: .7rem; }
  #nix-contact-strip input { font-size: .68rem; padding: .3rem .8rem; }
}

/* ============ Strip width tuning (2026-08-20) ============ */
/* keep strip content aligned with the nav container instead of extreme edges */
#nix-contact-strip {
  padding-left: max(1rem, calc((100% - 88rem) / 2 + 4rem)) !important;
  padding-right: max(1rem, calc((100% - 88rem) / 2 + 4rem)) !important;
  gap: 2rem !important;
}
/* search bar doubled */
#nix-contact-strip input { width: min(840px, 100%) !important; }
@media (max-width: 900px) {
  #nix-contact-strip { padding-left: 1rem !important; padding-right: 1rem !important; }
}

/* ============ Careers + FAQ nav links (2026-08-20) ============ */
header .nix-extra-nav { color: rgba(255,255,255,.78) !important; text-decoration: none !important; font-weight: 500 !important; }
header .nix-extra-nav:hover { color: #f4d03f !important; }
header > div.lg\:hidden .nix-extra-nav { display: flex !important; align-items: center; min-height: 44px; padding: 0 12px; color: rgba(255,255,255,.85) !important; border-radius: 8px; }
