/* ====== Theme tokens → Bootstrap variables (keep Bootstrap feel) ====== */
:root {
  --nvx-bg: #f8fafc;
  --nvx-card: #ffffff;
  --nvx-ink: #0f172a;
  --nvx-muted: #475569;
  --nvx-stroke: #e2e8f0;
  --nvx-primary: #0f172a;
  --nvx-primary-rgb: 15,23,42;
}

/* (Optional) Alternate/dark scheme:
[data-theme="dark"] {
  --nvx-bg: #0b1220;
  --nvx-card: #0f172a;
  --nvx-ink: #e2e8f0;
  --nvx-muted: #94a3b8;
  --nvx-stroke: #1f2937;
  --nvx-primary: #e2e8f0;
  --nvx-primary-rgb: 226,232,240;
}
*/

/* Map into Bootstrap tokens */
:root,
[data-theme="light"] {
  --bs-body-bg: var(--nvx-bg);
  --bs-body-color: var(--nvx-ink);
  --bs-border-color: var(--nvx-stroke);
  --bs-secondary-color: var(--nvx-muted);

  --bs-primary: var(--nvx-primary);
  --bs-primary-rgb: var(--nvx-primary-rgb);
  --bs-link-color: var(--bs-primary);
}

/* ====== Global ====== */
html, body { height: 100%; }
body {
  background: var(--bs-body-bg);
  color: var(--bs-body-color);
  text-rendering: optimizeLegibility;
}

/* ====== Reusable shadcn-like helpers (namespaced) ====== */
.nvx-card{
  background: var(--nvx-card);
  border: 1px solid var(--nvx-stroke);
  border-radius: 1rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.nvx-chip{
  display: inline-block;
  border: 1px solid var(--nvx-stroke);
  background: #fff;
  color: var(--nvx-ink);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
}
.nvx-logo{
  display:grid; place-items:center;
  height:38px; border:1px solid var(--nvx-stroke);
  border-radius:.75rem; background:#fff; color:#222;
  font-size:.9rem;
}
.nvx-thumb{
  height:140px; border:1px dashed var(--nvx-stroke);
  border-radius:.75rem;
  display:grid; place-items:center; color:var(--nvx-muted);
  background: #fff;
}
.nvx-icon{
  width:44px;height:44px;border-radius:10px;
  display:grid;place-items:center;
  border:1px solid var(--nvx-stroke);
  background: #fff;
}
.nvx-list{ margin:0; padding-left:1.1rem; }
.nvx-list li{ margin:.25rem 0; }

/* ====== Sections ====== */
.nvx-nav { background: var(--nvx-card); }
.nvx-nav .nav-link { color: var(--bs-body-color); opacity:.9; }
.nvx-nav .nav-link:hover { opacity: 1; text-decoration: underline; }

.nvx-hero{
  padding: clamp(48px, 8vw, 120px) 0 36px;
}
.nvx-hero-sub{
  max-width: 720px;
  color: var(--nvx-muted);
}

.nvx-hero-media{
  border: 1px solid var(--nvx-stroke);
  border-radius: .75rem;
  background: #fff;
}

.nvx-section{
  padding: 56px 0;
}

.nvx-band{
  padding: 24px 0;
  background: var(--nvx-card);
  border-top: 1px solid var(--nvx-stroke);
  border-bottom: 1px solid var(--nvx-stroke);
}

.nvx-step{
  display:inline-grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  border:1px solid var(--nvx-stroke);
  background:#fff; color:#111; font-weight:600;
}

.nvx-cta{
  padding: 56px 0;
  background: var(--nvx-card);
  border-top: 1px solid var(--nvx-stroke);
}

.nvx-footer{
  padding: 48px 0;
  background: var(--nvx-card);
  border-top: 1px solid var(--nvx-stroke);
}

/* ====== Accordion polish (keeps Bootstrap behavior) ====== */
.nvx-accordion .accordion-button{
  background: #fff;
  border-bottom: 1px solid var(--nvx-stroke);
  border-radius: .5rem .5rem 0 0;
}
.nvx-accordion .accordion-button:focus{
  box-shadow: none;
}
.nvx-accordion .accordion-body{
  background:#fff;
  border:1px solid var(--nvx-stroke);
  border-top: none;
  border-radius: 0 0 .5rem .5rem;
}

/* Utilities */
.border-soft { border: 1px solid var(--nvx-stroke) !important; }


/* ========= PALETTE & TOKENS ========= */
:root {
  --nav-link-color: #aeafb1;
  --nav-link-hover: #0F5CE0;
  --cta-start: #1F6BFF;
  --cta-end: #0F5CE0;
  --cta-text: #fff;

  --nav-h: 72px;
  --hero-radius: 36px;
  --hero-shadow: 0 30px 70px rgba(0,0,0,.45);
  --hero-edge-glow: rgba(255,255,255,.06);

  --hero-reveal: 12px;
  --page-gutter: clamp(16px, 3.2vw, 40px);
  --hero-radius: clamp(22px, 3.5vw, 40px);
  --hero-bg: #131416;
  --page-bg: #0D0D0D;

  --accent: #2b66ff;
  --text: #F4F7FF;
  --muted: #b9b9b9;
  --stroke: rgba(255,255,255,.06);
  --raise: 0 18px 60px rgba(0,0,0,.45);
  --raise-hover: 0 26px 80px rgba(0,0,0,.6);

  --glass-bg: color-mix(in oklab, white 6%, transparent);
  --glass-stroke: color-mix(in oklab, white 12%, transparent);
  --radius-xl: 28px;
  --radius-md: 18px;
  --shadow-soft: 0 20px 40px rgba(0,0,0,.35);

  /* comparison (kept for future sections) */
  --compare-brand-1: #2460E0;
  --compare-brand-2: #5ea0ff;
  --compare-row-bg-odd: color-mix(in oklab, white 6%, transparent);
  --compare-row-bg-even: color-mix(in oklab, white 4%, transparent);
  --compare-row-stroke: color-mix(in oklab, white 6%, transparent);
  --compare-pill-shadow: 0 12px 24px rgba(36,96,224,.35);
  --compare-pill-radius: 16px;
  --compare-check-bg: radial-gradient(circle at 50% 40%, rgba(36,96,224,.35), rgba(36,96,224,.15) 60%, rgba(0,0,0,.55));
  --review-stagger-pad: clamp(40px, 7.2vw, 96px);
}

/* page background + default text */
html, body { background: var(--page-bg); }
html, body { color: #fff; }

/* ========= NAVBAR ========= */
.glass-nav {
  position: sticky;
  top: 0;
  z-index: 1050;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: #0D0D0D;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  padding: 0.6rem 0;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.glass-nav.scrolled {
  background: linear-gradient(90deg, rgba(15,92,224,0.05) 0%, rgba(255,255,255,0) 25%);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
  border-bottom-color: rgba(0,0,0,.06);
}
.glass-nav.compact { padding: 0.4rem 0; }

/* typography (Inter recommended) */
.glass-nav,
.glass-nav .nav-link,
.btn-cta__label,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

/* nav layout pieces */
.nav-left,
.nav-right { flex: 0 0 auto; }
.nav-center {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}

/* Brand */
.navbar-brand { margin: 0; padding: 0; }
.brand-logo {
  display: block;
  height: 36px;
  width: auto;
  object-fit: contain;
}

/* center links */
.nav-center .nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 28px;
}
.nav-center .nav-link {
  color: var(--nav-link-color);
  font-weight: 500;
  font-size: 15px;
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-center .nav-link:hover { color: var(--nav-link-hover); }

/* CTA button (gradient pill) */
.btn-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  overflow: hidden;
  text-decoration: none;
  border: none;
  box-shadow: 0 6px 16px rgba(15,92,224,0.25);
}
.btn-cta__label {
  position: relative;
  z-index: 2;
  color: var(--cta-text);
  font-weight: 700;
  font-size: 14.5px;
  white-space: nowrap;
}
.btn-cta__bg {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--cta-start), var(--cta-end));
  border-radius: 999px; z-index: 0;
}
.btn-cta__hover {
  position: absolute; inset: -10%;
  border-radius: 999px; background: var(--cta-end);
  filter: blur(18px); opacity: 0; transform: scale(0.95);
  transition: opacity 0.25s ease, transform 0.25s ease; z-index: 0;
}
.btn-cta:hover .btn-cta__hover { opacity: .25; transform: scale(1); }

/* hamburger + theme toggle share the same shell */
.nav-toggle {
  width: 42px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--stroke);
  border-radius: 10px;
  background: color-mix(in oklab, white 6%, transparent);
  box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 0 0 1px var(--stroke);
  transition: background .2s ease, box-shadow .2s ease, transform .08s ease;
}
.nav-toggle:active { transform: translateY(1px); }
.nav-toggle:hover {
  background: color-mix(in oklab, white 10%, transparent);
  box-shadow: 0 12px 28px rgba(0,0,0,.5), inset 0 0 0 1px color-mix(in oklab, white 18%, transparent);
}

/* three-bar icon */
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  display: block;
  width: 20px; height: 2px; border-radius: 2px;
  background: color-mix(in oklab, white 85%, transparent);
  transition: transform .25s ease, opacity .2s ease, background .2s ease;
}
.nav-toggle-icon { position: relative; }
.nav-toggle-icon::before { position: absolute; top: -6px; left: 0; }
.nav-toggle-icon::after  { position: absolute; top:  6px; left: 0; }

/* animate to "X" when drawer open */
#drawerToggle[aria-expanded="true"] .nav-toggle-icon {
  background: transparent;
}
#drawerToggle[aria-expanded="true"] .nav-toggle-icon::before {
  transform: translateY(6px) rotate(45deg);
}
#drawerToggle[aria-expanded="true"] .nav-toggle-icon::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* theme-toggle (reuse shell, use sun/moon via mask if you want later) */
.theme-toggle .nav-toggle-icon,
.theme-toggle .nav-toggle-icon::before,
.theme-toggle .nav-toggle-icon::after {
  /* single dot style (optional) */
  width: 10px;
  border-radius: 50%;
  margin: 0;
}
.theme-toggle .nav-toggle-icon::before,
.theme-toggle .nav-toggle-icon::after { display: none; }

/* mobile drawer */
.mobile-drawer {
  background: var(--hero-bg);
  border-top: 1px solid var(--stroke);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
  transition: transform .25s ease, opacity .2s ease;
}
.mobile-drawer[hidden] {
  display: block;     /* keep height calc */
  transform: translateY(-8px);
  opacity: 0;
  height: 0; overflow: hidden; padding: 0;
}
.mobile-drawer.show {
  transform: none;
  opacity: 1;
}
.mobile-drawer .container { padding-block: clamp(10px, 2.5vw, 16px); }

.mobile-nav-list { margin: 0 0 12px; padding: 0; }
.mobile-link {
  display: block;
  padding: 12px 2px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in oklab, white 6%, transparent);
  transition: color .2s ease, text-shadow .2s ease, background .2s ease;
}
.mobile-nav-list li:last-child .mobile-link { border-bottom: 0; }
.mobile-link:hover {
  color: var(--accent);
  text-shadow: 0 0 8px rgba(36,96,224,.35);
  background: color-mix(in oklab, white 4%, transparent);
}

/* responsive rules */
@media (min-width: 992px){
  .nav-toggle.d-lg-none { display: none !important; }
  .mobile-drawer { display: none !important; }
  /* center stays truly centered */
  .glass-nav .container { position: relative; }
  .nav-center {
    position: absolute; left: 50%; transform: translateX(-50%);
    flex: none; white-space: nowrap;
  }
  .nav-left, .nav-right { position: relative; z-index: 2; }
  .nav-center { z-index: 1; }
}

/* tighter desktops */
@media (min-width: 992px) and (max-width: 1199.98px){
  .nav-center .nav-list { gap: 18px; }
}

/* mobile logo tweaks */
@media (max-width: 991.98px){
  .brand-logo { height: 30px; }
}


/* ===== HERO (inset card vibe on black) ===== */
.nvx-hero{
  position: relative;
  margin-inline: var(--page-gutter);
  margin-bottom: clamp(16px, 2.5vw, 28px);
  padding-top: clamp(32px, 5vw, 56px);
  padding-bottom: clamp(40px, 6vw, 64px);
  background: var(--hero-bg);
  border-radius: var(--hero-radius);
  box-shadow: var(--hero-shadow);
  overflow: clip;
}

/* faint inner rim + soft top halo */
.nvx-hero::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  border-radius: inherit;
  box-shadow:
    0 1px 0 var(--hero-edge-glow) inset,
    0 -1px 0 var(--hero-edge-glow) inset;
}
.nvx-hero::after{
  content:""; position:absolute; left:0; right:0; top:-72px; height:140px; pointer-events:none;
  background: radial-gradient(120% 120% at 50% 0%, rgba(255,255,255,.08), transparent 55%);
  filter: blur(8px); opacity:.7;
}

.hero-inner{ max-width: 1080px; }

/* eyebrow + title */
.eyebrow{
  color: var(--muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .78rem;
}
.hero-title{
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-size: clamp(34px, 6vw, 58px);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--text);
  margin: 0 0 .3rem;
}
.hero-title .accent{ color: var(--accent); }

/* subtitle */
.nvx-hero-sub{
  max-width: 760px;
  color: var(--muted);
}

/* elevate buttons without changing Bootstrap look */
.btn-raise{ box-shadow: 0 10px 26px rgba(0,0,0,.35); }
.btn-raise:hover{ box-shadow: 0 14px 34px rgba(0,0,0,.5); }

/* media frame */
.hero-media-wrap{ background: color-mix(in oklab, white 3.5%, transparent); }
.nvx-hero-media{
  border: 1px solid var(--stroke);
  border-radius: 16px;
  background: color-mix(in oklab, white 2.5%, transparent);
}

/* chips already styled; add subtle glow on hover */
.nvx-chip:hover{
  box-shadow: 0 6px 18px rgba(36,96,224,.25);
}

/* tighten on small screens */
@media (max-width: 575.98px){
  .nvx-hero{ margin-inline: 12px; }
}

/* ===== Value Props (4-up) ===== */
.vp-card{
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  background:
    radial-gradient(120% 80% at 20% 0%, color-mix(in oklab, white 6%, transparent), transparent 60%),
    radial-gradient(80% 60% at 90% 10%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 70%),
    var(--hero-bg);
}
.vp-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--raise-hover);
  border-color: color-mix(in oklab, white 12%, transparent);
}

/* icon badge with subtle glow ring */
.vp-icon{
  position: relative;
  border-radius: 12px;
  background: color-mix(in oklab, white 6%, transparent);
  border: 1px solid var(--stroke);
  width: 44px; height: 44px; /* ensure consistent size even if nvx-icon changes elsewhere */
}
.vp-icon::after{
  content:"";
  position:absolute; inset:-2px; border-radius: inherit; pointer-events:none;
  background: conic-gradient(from 210deg, rgba(43,102,255,.45), rgba(43,102,255,0), rgba(255,255,255,.1), rgba(43,102,255,.45));
  filter: blur(10px);
  opacity: .35;
}

/* text colors */
.vp-title{ color: var(--text); letter-spacing: -.01em; }
.vp-text{ color: var(--muted); }

/* responsive polish */
@media (max-width: 575.98px){
  .vp-card{ padding: 1rem !important; }
}

/* ===== Highlight Metrics ===== */
.metric-card{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 0% 0%,
      color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
    radial-gradient(90% 70% at 100% 0%,
      color-mix(in oklab, white 6%, transparent), transparent 70%),
    var(--hero-bg);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
}
.metric-card::after{
  /* subtle rim light */
  content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit;
  box-shadow: 0 1px 0 color-mix(in oklab, white 10%, transparent) inset,
              0 -1px 0 color-mix(in oklab, white 6%, transparent) inset;
}
.metric-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--raise-hover);
  border-color: color-mix(in oklab, white 12%, transparent);
}

/* Big number with accent gradient */
.metric-value{
  font-weight: 800;
  font-size: clamp(28px, 5.6vw, 42px);
  letter-spacing: -.01em;
  line-height: 1.1;
  margin-bottom: .35rem;
  background: linear-gradient(180deg, #eaf1ff 0%, #9bb8ff 55%, #77a0ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 10px 30px rgba(43,102,255,.15);
}

/* Label */
.metric-label{
  color: var(--muted);
  font-size: .98rem;
}

/* Footnote line */
.metric-footnote{
  border-top: 1px solid var(--stroke);
  padding-top: .75rem;
}

/* Compact on small screens */
@media (max-width: 575.98px){
  .metric-card{ padding: 1.15rem !important; }
}


/* ===== LIVE DEMOS (GRID) — theme-aligned with VP / Metrics ===== */
#demos .demo-card{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 80% at 18% 0%,
      color-mix(in oklab, white 6%, transparent), transparent 60%),
    radial-gradient(80% 60% at 92% 8%,
      color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%),
    var(--hero-bg) !important;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
}
#demos .demo-card::after{
  /* subtle inner rim like Metrics */
  content:""; position:absolute; inset:0; pointer-events:none; border-radius: inherit;
  box-shadow:
    0 1px 0 color-mix(in oklab, white 10%, transparent) inset,
    0 -1px 0 color-mix(in oklab, white 6%, transparent) inset;
}
#demos .demo-card:hover{
  transform: translateY(-4px) !important;
  box-shadow: var(--raise-hover) !important;
  border-color: color-mix(in oklab, white 12%, transparent) !important;
}

/* Thumbnail block — same glass + stroke language */
#demos .nvx-thumb{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height: 160px !important;
  padding: .65rem !important;
  text-align:center !important;
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  color: var(--text) !important;

  background:
    radial-gradient(100% 80% at 50% 0%,
      color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
    color-mix(in oklab, white 4%, transparent) !important;

  border: 1px solid var(--stroke) !important;
  border-radius: var(--radius-md) !important;
  transition: background .25s ease, border-color .25s ease !important;
}
#demos .demo-card:hover .nvx-thumb{
  background:
    radial-gradient(100% 80% at 50% 0%,
      color-mix(in oklab, var(--accent) 18%, transparent), transparent 60%),
    color-mix(in oklab, white 6%, transparent) !important;
  border-color: color-mix(in oklab, var(--accent) 35%, var(--stroke)) !important;
}
#demos .nvx-thumb small{
  color: var(--muted) !important;
  font-weight: 600;
}

/* Launch button — same gradient tokens as site CTAs */
#demos{
  --btn-grad-1: var(--cta-start);
  --btn-grad-2: var(--cta-end);
  --btn-text:   var(--cta-text);
  --btn-accent: var(--accent);
  --btn-stroke: var(--stroke);
}
#demos .btn-launch{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 10px; width: 100%;
  padding: .8rem 1rem !important;
  border-radius: 12px !important;
  text-decoration: none !important;

  background: color-mix(in oklab, white 4%, transparent) !important;
  border: 1px solid var(--btn-stroke) !important;
  color: var(--text) !important;

  font-weight: 700 !important; letter-spacing: .01em;
  box-shadow: 0 8px 22px rgba(0,0,0,.35) !important;
  transition:
    transform .2s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease,
    color .25s ease !important;
  overflow: hidden; isolation: isolate;
}
#demos .btn-launch::before{
  /* faint gradient wash (matches CTA gradient) */
  content:""; position:absolute; inset:0; border-radius: inherit; z-index:0;
  background: linear-gradient(180deg, var(--btn-grad-1), var(--btn-grad-2));
  opacity: .08;
}
#demos .btn-launch::after{
  /* hover glow using gradient end */
  content:""; position:absolute; inset:-15%; border-radius: inherit; z-index:0;
  background: radial-gradient(60% 60% at 50% 50%, var(--btn-grad-2), transparent 65%);
  filter: blur(18px); opacity: 0; transform: scale(.95);
  transition: opacity .25s ease, transform .25s ease;
}
#demos .btn-launch .label,
#demos .btn-launch .arrow{ position: relative; z-index: 1; }
#demos .btn-launch .arrow{ opacity: .9; transition: transform .25s ease, opacity .25s ease; }

#demos .btn-launch:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--btn-accent) 32%, var(--btn-stroke)) !important;
  background: color-mix(in oklab, var(--btn-accent) 10%, transparent) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.5),
              0 0 0 1px color-mix(in oklab, white 16%, transparent) inset !important;
}
#demos .btn-launch:hover::after{ opacity: .25; transform: scale(1); }
#demos .btn-launch:hover .arrow{ transform: translateX(4px); opacity: 1; }
#demos .btn-launch:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--btn-grad-2) 45%, transparent),
              0 8px 22px rgba(0,0,0,.35) !important;
}

/* Bottom CTA — same strong gradient + ring as elsewhere */
#demos .btn-cta-strong{
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px;
  padding: .9rem 1.6rem !important;
  border-radius: 14px !important;
  font-weight: 800 !important; letter-spacing: .01em;

  color: var(--btn-text) !important;
  background: linear-gradient(180deg, var(--btn-grad-1), var(--btn-grad-2)) !important;
  border: 1px solid color-mix(in oklab, white 14%, transparent) !important;
  box-shadow: 0 16px 36px color-mix(in oklab, var(--btn-grad-2) 45%, transparent),
              0 0 0 1px color-mix(in oklab, white 14%, transparent) inset !important;
  text-decoration: none !important;
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease !important;
}
#demos .btn-cta-strong:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 44px color-mix(in oklab, var(--btn-grad-2) 55%, transparent),
              0 0 0 1px color-mix(in oklab, white 18%, transparent) inset !important;
  filter: saturate(1.05);
}
#demos .btn-cta-strong:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--btn-grad-2) 45%, transparent),
              0 20px 44px color-mix(in oklab, var(--btn-grad-2) 55%, transparent) !important;
}

/* Responsive polish */
@media (max-width: 575.98px){
  #demos .demo-card{ padding: 1rem !important; }
  #demos .nvx-thumb{ height: 140px !important; }
  #demos .btn-launch{ padding: .7rem .9rem !important; }
  #demos .btn-cta-strong{ width: 100%; }
}


/* ===== HOW IT WORKS — timeline cards (scoped) ===== */
#how .how-track{
  position: relative;
}

/* horizontal connector on md+ */
@media (min-width: 768px){
  #how .how-track::before{
    content:"";
    position: absolute;
    left: 12px; right: 12px;
    top: calc(44px + .5rem); /* aligns with badge center */
    height: 2px;
    background: linear-gradient(90deg,
      color-mix(in oklab, var(--accent) 35%, transparent) 0%,
      color-mix(in oklab, white 14%, transparent) 100%);
    opacity: .45;
    border-radius: 2px;
  }
}

/* step card visuals */
#how .step-card{
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important;
  background:
    radial-gradient(120% 80% at 20% 0%, color-mix(in oklab, white 6%, transparent), transparent 60%),
    radial-gradient(80% 60% at 85% 5%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%),
    var(--hero-bg) !important;
}
#how .step-card::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius: inherit;
  box-shadow:
    0 1px 0 color-mix(in oklab, white 10%, transparent) inset,
    0 -1px 0 color-mix(in oklab, white 6%, transparent) inset;
}
#how .step-card:hover{
  transform: translateY(-4px) !important;
  box-shadow: var(--raise-hover) !important;
  border-color: color-mix(in oklab, white 12%, transparent) !important;
}

/* badge with glow */
#how .step-badge{
  display: inline-grid; place-items: center;
  width: 40px; height: 40px;
  border-radius: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #2b66ff, #0F5CE0);
  box-shadow:
    0 10px 24px rgba(15,92,224,.35),
    0 0 0 1px color-mix(in oklab, white 12%, transparent) inset;
  position: relative;
}
#how .step-badge::after{
  content:"";
  position:absolute; inset:-6px; border-radius: 14px; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(36,96,224,.45), transparent 60%);
  filter: blur(10px); opacity:.5;
}

/* text colors */
#how .step-title{
  color: var(--text) !important;
  letter-spacing: -.01em;
}
#how .step-text{
  color: var(--muted) !important;
}

/* vertical connector on mobile */
@media (max-width: 767.98px){
  #how .col-12 + .col-12 .step-card::before{
    content:"";
    position:absolute;
    top:-12px; left:20px; right:auto; width:2px; height:12px;
    background: color-mix(in oklab, var(--accent) 28%, transparent);
    opacity:.5; border-radius:2px;
  }
}

/* compact padding on xs */
@media (max-width: 575.98px){
  #how .step-card{ padding: 1rem !important; }
}


/* ===== INDUSTRIES (scoped, with enforced overrides) ===== */
#industries .industry-card{
  position: relative;
  overflow: hidden;
  cursor: default;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
  background:
    radial-gradient(120% 90% at 10% 0%,
      color-mix(in oklab, white 6%, transparent), transparent 60%),
    radial-gradient(80% 60% at 90% 10%,
      color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%),
    var(--hero-bg) !important;
}
#industries .industry-card::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius: inherit;
  box-shadow:
    0 1px 0 color-mix(in oklab, white 10%, transparent) inset,
    0 -1px 0 color-mix(in oklab, white 6%, transparent) inset;
}
#industries .industry-card:hover{
  transform: translateY(-4px) !important;
  box-shadow: var(--raise-hover) !important;
  border-color: color-mix(in oklab, white 12%, transparent) !important;
  background:
    radial-gradient(120% 90% at 10% 0%,
      color-mix(in oklab, white 10%, transparent), transparent 60%),
    radial-gradient(80% 60% at 90% 10%,
      color-mix(in oklab, var(--accent) 18%, transparent), transparent 70%),
    var(--hero-bg) !important;
}

/* icon pill */
#industries .industry-icon{
  width: 44px; height: 44px;
  margin-inline: auto;
  border-radius: 12px;
  display: grid; place-items: center;
  border: 1px solid var(--stroke) !important;
  background: color-mix(in oklab, white 6%, transparent) !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.35) !important;
  font-size: 22px;
}
#industries .industry-card:hover .industry-icon{
  border-color: color-mix(in oklab, var(--accent) 35%, var(--stroke)) !important;
}

/* label */
#industries .industry-title{
  margin-top: .6rem;
  color: var(--text) !important;
  font-weight: 600;
  letter-spacing: -.01em;
  font-size: .98rem;
}

/* compact spacing on small screens */
@media (max-width: 575.98px){
  #industries .industry-card{ padding: 1rem !important; }
}

/* ===== PRODUCT + INTEGRATIONS (scoped) ===== */
#product-plus .features-card,
#product-plus .integrations-card{
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
  background:
    radial-gradient(120% 80% at 18% 0%, color-mix(in oklab, white 6%, transparent), transparent 60%),
    radial-gradient(80% 60% at 92% 8%, color-mix(in oklab, var(--accent) 14%, transparent), transparent 70%),
    var(--hero-bg) !important;
}
#product-plus .features-card::after,
#product-plus .integrations-card::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius: inherit;
  box-shadow:
    0 1px 0 color-mix(in oklab, white 10%, transparent) inset,
    0 -1px 0 color-mix(in oklab, white 6%, transparent) inset;
}
#product-plus .features-card:hover,
#product-plus .integrations-card:hover{
  transform: translateY(-4px) !important;
  box-shadow: var(--raise-hover) !important;
  border-color: color-mix(in oklab, white 12%, transparent) !important;
}

/* tiny separator under card headings */
#product-plus .mini-sep{
  height: 1px;
  background: linear-gradient(90deg,
      color-mix(in oklab, var(--accent) 35%, transparent),
      color-mix(in oklab, white 10%, transparent));
  opacity: .5;
  border-radius: 2px;
}

/* Feature bullets with glowing check */
#product-plus .features-list{
  margin: 0; padding: 0; list-style: none;
}
#product-plus .features-list li{
  position: relative;
  padding-left: 1.6rem;
  color: var(--muted) !important;
  line-height: 1.55;
  margin: .35rem 0;
}
#product-plus .features-list .check{
  position:absolute; left:0; top:.1rem;
  width: 18px; height: 18px; border-radius: 6px;
  background: linear-gradient(180deg, #2b66ff, #0F5CE0);
  box-shadow: 0 8px 18px rgba(15,92,224,.35), 0 0 0 1px color-mix(in oklab, white 12%, transparent) inset;
}
#product-plus .features-list .check::before{
  content:""; position:absolute; inset:0; border-radius:6px; pointer-events:none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(36,96,224,.45), transparent 60%);
  filter: blur(8px); opacity:.6;
}
#product-plus .features-list .check::after{
  /* tick mark */
  content:""; position:absolute; left:5px; top:3px;
  width:6px; height:10px; border:2px solid #fff; border-top:none; border-left:none;
  transform: rotate(45deg);
}

/* Logos grid tiles */
#product-plus .logo-tile{
  display:grid; place-items:center;
  height: 44px;
  padding: .25rem .5rem;
  border-radius: 12px !important;
  border: 1px solid var(--stroke) !important;
  background: color-mix(in oklab, white 6%, transparent) !important;
  color: var(--text) !important;
  font-weight: 600;
  letter-spacing: .01em;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease, background .2s ease !important;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
  text-align: center;
}
#product-plus .logo-tile:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 32%, var(--stroke)) !important;
  background: color-mix(in oklab, var(--accent) 10%, transparent) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.5), 0 0 0 1px color-mix(in oklab, white 16%, transparent) inset;
}

/* spacing & responsiveness */
@media (max-width: 575.98px){
  #product-plus .features-card,
  #product-plus .integrations-card{ padding: 1rem !important; }
}


/* ===== TECH BAND (scoped, enforced) ===== */
#tech.tech-band{
  position: relative;
  overflow: clip;
  padding-block: clamp(18px, 3.2vw, 28px) !important;
  background:
    radial-gradient(110% 80% at 50% 0%,
      color-mix(in oklab, var(--accent) 10%, transparent), transparent 60%),
    var(--hero-bg) !important;
  border-top: 1px solid var(--stroke) !important;
  border-bottom: 1px solid var(--stroke) !important;
}

/* subtle animated ambient line */
#tech.tech-band::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background:
    linear-gradient(90deg,
      color-mix(in oklab, var(--accent) 40%, transparent),
      color-mix(in oklab, white 12%, transparent),
      color-mix(in oklab, var(--accent) 40%, transparent));
  opacity:.6;
  filter: blur(.6px);
}
#tech.tech-band::after{
  content:"";
  position:absolute; left:-30%; right:-30%; bottom:-2px; height:2px;
  background:
    linear-gradient(90deg,
      color-mix(in oklab, white 10%, transparent),
      color-mix(in oklab, var(--accent) 35%, transparent),
      color-mix(in oklab, white 10%, transparent));
  opacity:.35;
  transform: translateX(0);
  animation: tech-glide 11s linear infinite;
}
@keyframes tech-glide{
  from { transform: translateX(-8%); }
  to   { transform: translateX(8%); }
}

/* chip treatment (wins over base .nvx-chip) */
#tech .tech-chip{
  position: relative;
  border: 1px solid var(--stroke) !important;
  background: color-mix(in oklab, white 6%, transparent) !important;
  color: var(--text) !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: .9rem !important;
  letter-spacing: .01em;
  box-shadow: 0 8px 22px rgba(0,0,0,.35) !important;
  transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease, background .25s ease !important;
}
#tech .tech-chip::before{
  /* tiny accent dot */
  content:"";
  width:6px; height:6px; border-radius:50%;
  margin-right:8px;
  display:inline-block;
  background: radial-gradient(circle at 40% 40%, #7fb0ff, #2b66ff);
  box-shadow: 0 0 10px rgba(43,102,255,.55);
  vertical-align: middle;
}
#tech .tech-chip:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--accent) 32%, var(--stroke)) !important;
  background: color-mix(in oklab, var(--accent) 10%, transparent) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.5), 0 0 0 1px color-mix(in oklab, white 16%, transparent) inset !important;
}

/* spacing + reduced motion */
#tech .tech-track{ row-gap: .5rem !important; }
@media (prefers-reduced-motion: reduce){
  #tech.tech-band::after{ animation: none; }
}


/* ===== CASE STUDIES (scoped, enforced) ===== */
#cases .study-card{
  position: relative;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
  background:
    radial-gradient(120% 80% at 18% 0%, color-mix(in oklab, white 6%, transparent), transparent 60%),
    radial-gradient(90% 70% at 100% 0%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%),
    var(--hero-bg) !important;
}
#cases .study-card::after{
  content:"";
  position:absolute; inset:0; pointer-events:none; border-radius: inherit;
  box-shadow:
    0 1px 0 color-mix(in oklab, white 10%, transparent) inset,
    0 -1px 0 color-mix(in oklab, white 6%, transparent) inset;
}
#cases .study-card:hover{
  transform: translateY(-4px) !important;
  box-shadow: var(--raise-hover) !important;
  border-color: color-mix(in oklab, white 12%, transparent) !important;
}

/* Top thumb/header band */
#cases .study-thumb{
  display:grid; place-items:center;
  height: 136px !important;
  border-bottom: 1px solid var(--stroke) !important;
  background:
    radial-gradient(120% 80% at 50% 10%, color-mix(in oklab, var(--accent) 20%, transparent), transparent 65%),
    radial-gradient(80% 60% at 10% 0%, color-mix(in oklab, white 10%, transparent), transparent 70%),
    var(--hero-bg) !important;
  color: var(--text) !important;
  font-weight: 700;
  letter-spacing: .01em;
  text-align:center;
}

/* Title & body */
#cases .study-title{ color: var(--text) !important; letter-spacing: -.01em; }
#cases .dim{ color: var(--muted) !important; }

/* Stat chips */
#cases .study-stats{
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 6px 8px;
}
#cases .study-stats li{ margin: 0; }
#cases .stat-chip{
  display:inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--stroke) !important;
  background: color-mix(in oklab, white 6%, transparent) !important;
  color: var(--text) !important;
  font-weight: 700;
  font-size: .85rem;
  box-shadow: 0 8px 22px rgba(0,0,0,.35);
}

/* Quote */
#cases .study-quote{
  color: var(--muted) !important;
  padding-left: .85rem;
  border-left: 2px solid color-mix(in oklab, var(--accent) 35%, transparent);
}
#cases .study-quote .author{ color: var(--text) !important; }

/* Compact spacing on small screens */
@media (max-width: 575.98px){
  #cases .study-card .p-4{ padding: 1rem !important; }
  #cases .study-thumb{ height: 120px !important; }
}

/* ===== CTA BAND (scoped, enforced) ===== */
#cta.cta-band{
  position: relative;
  overflow: clip;
  margin-inline: var(--page-gutter);
  margin-top: clamp(16px, 3vw, 28px);
  margin-bottom: clamp(16px, 3vw, 28px);
  padding-block: clamp(28px, 5vw, 56px) !important;
  background:
    radial-gradient(120% 90% at 15% 0%,
      color-mix(in oklab, var(--accent) 20%, transparent), transparent 60%),
    radial-gradient(120% 80% at 85% 0%,
      color-mix(in oklab, white 10%, transparent), transparent 65%),
    var(--hero-bg) !important;
  border: 1px solid var(--stroke) !important;
  border-radius: var(--hero-radius) !important;
  box-shadow: var(--hero-shadow) !important;
}

/* subtle edge glow */
#cta.cta-band::before{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  border-radius: inherit;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(255,255,255,.06) inset;
}

/* soft ambient orbs */
#cta.cta-band::after{
  content:"";
  position:absolute; width: 44vmax; height: 44vmax;
  left: 50%; top: -30%;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(43,102,255,.20), rgba(43,102,255,0) 70%);
  filter: blur(18px);
  opacity: .45;
}

/* title + eyebrow */
#cta .cta-title{
  color: var(--text) !important;
  letter-spacing: -.02em;
  font-weight: 700 !important;
  font-size: clamp(26px, 4.6vw, 40px) !important;
  margin-bottom: .35rem !important;
}
#cta .section-eyebrow{
  color: var(--muted) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-weight: 700;
  font-size: .78rem;
  margin-bottom: .5rem !important;
}

/* buttons — lift without changing Bootstrap look */
#cta .btn-raise{ box-shadow: 0 12px 26px rgba(0,0,0,.45) !important; }
#cta .btn-raise:hover{ box-shadow: 0 16px 36px rgba(0,0,0,.6) !important; }

/* ensure outline contrast on dark */
#cta .btn-outline-secondary{
  border-color: color-mix(in oklab, white 18%, transparent) !important;
  color: var(--text) !important;
}
#cta .btn-outline-secondary:hover{
  border-color: var(--text) !important;
  background: color-mix(in oklab, white 6%, transparent) !important;
}

/* compact on small screens */
@media (max-width: 575.98px){
  #cta.cta-band{ margin-inline: 12px; padding-block: 24px !important; }
}


/* ===== FOOTER (scoped, enforced) ===== */
.nvx-footer{
  position: relative;
  overflow: clip;
  margin-top: clamp(18px, 3.2vw, 28px);
  padding-block: clamp(28px, 5vw, 56px) !important;
  background:
    radial-gradient(120% 90% at 10% 0%,
      color-mix(in oklab, var(--accent) 12%, transparent), transparent 60%),
    radial-gradient(120% 80% at 90% 0%,
      color-mix(in oklab, white 8%, transparent), transparent 65%),
    var(--hero-bg) !important;
  border-top: 1px solid var(--stroke) !important;
}

/* subtle top highlight + inner edge */
.nvx-footer::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:2px;
  background: linear-gradient(90deg,
      color-mix(in oklab, var(--accent) 40%, transparent),
      color-mix(in oklab, white 14%, transparent),
      color-mix(in oklab, var(--accent) 40%, transparent));
  opacity:.6; filter: blur(.6px);
}
.nvx-footer::after{
  content:"";
  position:absolute; inset:0; pointer-events:none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 -1px 0 rgba(255,255,255,.05) inset;
}

/* brand/title */
.nvx-footer .footer-brand{
  color: var(--text) !important;
  letter-spacing: -.01em;
  font-weight: 700 !important;
}

/* links */
.nvx-footer .footer-link{
  color: var(--muted) !important;
  text-decoration: none !important;
  transition: color .2s ease, text-shadow .2s ease;
}
.nvx-footer .footer-link:hover{
  color: var(--accent) !important;
  text-shadow: 0 0 8px rgba(43,102,255,.35);
}

/* spacing + divider for the bottom note */
.nvx-footer .footer-note{
  border-top: 1px solid var(--stroke) !important;
  padding-top: .75rem !important;
}

/* responsive touch-ups */
@media (max-width: 575.98px){
  .nvx-footer{ padding-block: 24px !important; }
}


/* Forms on dark surfaces */
.form-control, .form-select, .form-check-input{
  background: color-mix(in oklab, white 6%, transparent) !important;
  border: 1px solid var(--stroke) !important;
  color: var(--text) !important;
}
.form-control::placeholder{ color: var(--muted) !important; }
.form-control:focus, .form-select:focus{
  border-color: color-mix(in oklab, var(--accent) 30%, var(--stroke)) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta-end) 35%, transparent) !important;
  background: color-mix(in oklab, white 8%, transparent) !important;
}


/* ===== AUTH PAGES ========================================================= */
.auth-shell{
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: clamp(24px, 4vw, 56px);
  background:
    radial-gradient(120% 100% at 15% -10%,
      color-mix(in oklab, var(--accent) 12%, transparent), transparent 65%),
    radial-gradient(90% 60% at 90% -10%,
      color-mix(in oklab, white 8%, transparent), transparent 70%),
    var(--page-bg);
}

.auth-card{
  max-width: 520px; width: 100%;
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 90% at 0% 0%,
      color-mix(in oklab, white 6%, transparent), transparent 60%),
    radial-gradient(80% 70% at 100% 0%,
      color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%),
    var(--hero-bg);
  border: 1px solid var(--stroke);
  box-shadow: var(--raise);
  overflow: hidden;
}
.auth-card::after{
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow: 0 1px 0 color-mix(in oklab, white 10%, transparent) inset,
              0 -1px 0 color-mix(in oklab, white 6%, transparent) inset;
}

.auth-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin-bottom: .75rem;
}
.auth-brand{
  font-weight: 800; letter-spacing: .02em; color: var(--text);
}
.auth-subtitle{
  color: var(--muted); margin: 0 0 .5rem; font-size: .95rem;
}

.auth-divider{
  height:1px; border:0; margin: .75rem 0 1rem;
  background: linear-gradient(90deg,
     color-mix(in oklab, var(--accent) 35%, transparent),
     color-mix(in oklab, white 12%, transparent));
  opacity:.6; border-radius:2px;
}

.auth-muted{ color: var(--muted) !important; }
.auth-link{
  color: var(--muted); text-decoration: none;
  transition: color .2s ease, text-shadow .2s ease;
}
.auth-link:hover{
  color: var(--accent);
  text-shadow: 0 0 8px rgba(43,102,255,.35);
}

/* Dark-friendly form controls (if not already added) */
.form-control, .form-select, .form-check-input{
  background: color-mix(in oklab, white 6%, transparent) !important;
  border: 1px solid var(--stroke) !important;
  color: var(--text) !important;
}
.form-control::placeholder{ color: var(--muted) !important; }
.form-control:focus, .form-select:focus{
  border-color: color-mix(in oklab, var(--accent) 30%, var(--stroke)) !important;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--cta-end) 35%, transparent) !important;
  background: color-mix(in oklab, white 8%, transparent) !important;
}

/* Button helpers */
.btn-100{ width: 100% !important; }

/* ===== Autofill + Placeholder fixes (put at end of public/style.css) ===== */


/* Autofill focus — fallback first, then enhanced when color-mix is supported */
input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
  /* Fallback (works everywhere) */
  box-shadow:
    0 0 0 1000px rgba(255,255,255,.08) inset,
    0 0 0 3px rgba(15, 92, 224, .35) !important;
  -webkit-box-shadow:
    0 0 0 1000px rgba(255,255,255,.08) inset,
    0 0 0 3px rgba(15, 92, 224, .35) !important;
  border-color: rgba(43,102,255,.30) !important;

  /* Enhanced (only parsed if supported) */
  box-shadow:
    0 0 0 1000px color-mix(in srgb, rgb(41, 41, 41) 8%, transparent) inset,
    0 0 0 3px color-mix(in srgb, var(--cta-end) 35%, transparent) !important;
  -webkit-box-shadow:
    0 0 0 1000px color-mix(in srgb, rgb(49, 49, 49) 8%, transparent) inset,
    0 0 0 3px color-mix(in srgb, var(--cta-end) 35%, transparent) !important;
  border-color: color-mix(in srgb, var(--accent) 30%, var(--stroke)) !important;

  /* keep caret/text aligned with theme */
  -webkit-text-fill-color: #0f172a!important;
  caret-color: var(--text) !important;
}

/* ==== Demo page polish (scoped by #nvx-demo) ==== */
#nvx-demo .pane-card{
  position: relative;
  background:
    radial-gradient(120% 80% at 20% 0%, color-mix(in oklab, white 6%, transparent), transparent 60%),
    radial-gradient(80% 60% at 85% 5%, color-mix(in oklab, var(--accent) 16%, transparent), transparent 70%),
    var(--hero-bg) !important;
}
#nvx-demo .preview-frame{
  border: 1px dashed var(--nvx-stroke);
  border-radius: .85rem;
  background: #232323;
  height: clamp(140px, 28vw, 220px);
  overflow: hidden;
  
}
#nvx-demo .tile{
  padding: .6rem;
  border: 1px solid var(--nvx-stroke);
  border-radius: .9rem;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
  background: #232323;
  box-shadow: 0 8px 26px rgba(0,0,0,.08);
  cursor: pointer;
}
#nvx-demo .tile:hover{
  transform: translateY(-2px);
  border-color: color-mix(in oklab, white 16%, transparent);
  box-shadow: var(--raise-hover);
}
#nvx-demo input[type="radio"]:checked + .tile{
  border-color: color-mix(in oklab, var(--accent) 38%, transparent);
  box-shadow: 0 14px 40px rgba(36,96,224,.3);
}
#nvx-demo .step-title{ color: var(--text) !important; }
#nvx-demo .nvx-step{
  width: 34px; height: 34px;
  border-radius: 10px;
  display: inline-grid; place-items: center;
  font-weight: 700; color:#fff;
  background: linear-gradient(180deg, #2b66ff, #0F5CE0);
  box-shadow: 0 10px 24px rgba(15,92,224,.35), 0 0 0 1px color-mix(in oklab, white 12%, transparent) inset;
}

/* subtle connector between panes on md+ */
@media (min-width: 992px){
  .demo-stage{ position: relative; }
  .demo-stage::before{
    content:""; position:absolute; top: 64px; bottom: 24px; left: 50%;
    width: 2px; transform: translateX(-50%);
    background: linear-gradient(180deg,
      color-mix(in oklab, var(--accent) 30%, transparent),
      color-mix(in oklab, white 12%, transparent));
    opacity: .35; border-radius: 2px;
  }
}


#nvx-demo small{
  color:#e2e8f0;
}

#nvx-demo .nvx-thumb{
  background-color: #131313;
}


/* skeleton shimmer effect */
.skeleton {
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}


/* show full image with letterboxing */
#nvx-demo .nvx-thumb img,
#nvx-demo .preview-frame img{
  object-fit: contain !important;
  background:#111;          /* letterbox color */
}

/* nicer padding for contain */
#nvx-demo .nvx-thumb { padding: .25rem; }
#nvx-demo .preview-frame { background:#111; }



/* ===== Previews should show full image ===== */
#nvx-demo .preview-frame img {
  object-fit: contain !important;
}

/* ===== Skeleton shimmer (used while "generating") ===== */
.skeleton {
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Placeholder size for generated image block */
.nvx-gen-placeholder {
  width: min(90vw, 520px);
  height: clamp(240px, 45vw, 520px);
  margin-inline: auto;
}

/* ===== Simple progress bar ===== */
.nvx-progress {
  position: relative;
  width: min(90vw, 520px);
  height: 8px;
  border-radius: 999px;
  background: #1e293b;
  overflow: hidden;
  margin: 0 auto;
}
.nvx-progress > span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #2b66ff, #0f5ce0);
  transition: width .12s linear;
}