/* ============================================================
   SKILL JOBS — design system v3
   Premium SaaS aesthetic with rich gradients, glass morphism,
   layered shadows, and a deep orange + emerald palette.
   ============================================================ */

:root {
  /* ---------- Brand: rich orange & emerald ---------- */
  --sj-orange-50:   #FFF7ED;
  --sj-orange-100:  #FFEDD5;
  --sj-orange-200:  #FED7AA;
  --sj-orange-300:  #FDBA74;
  --sj-orange-400:  #FB923C;
  --sj-orange-500:  #F97316;
  --sj-orange-600:  #EA580C;
  --sj-orange-700:  #C2410C;
  --sj-orange-800:  #9A3412;
  --sj-orange-900:  #7C2D12;

  --sj-emerald-50:  #ECFDF5;
  --sj-emerald-100: #D1FAE5;
  --sj-emerald-200: #A7F3D0;
  --sj-emerald-300: #6EE7B7;
  --sj-emerald-400: #34D399;
  --sj-emerald-500: #10B981;
  --sj-emerald-600: #059669;
  --sj-emerald-700: #047857;
  --sj-emerald-800: #065F46;
  --sj-emerald-900: #064E3B;

  --sj-amber-400:   #FBBF24;
  --sj-lime-400:    #A3E635;
  --sj-lime-500:    #84CC16;

  /* Semantic tokens */
  --sj-primary:        var(--sj-orange-600);
  --sj-primary-hover:  var(--sj-orange-700);
  --sj-primary-soft:   var(--sj-orange-50);
  --sj-primary-ink:    var(--sj-orange-900);

  --sj-secondary:      var(--sj-emerald-600);
  --sj-secondary-hover:var(--sj-emerald-700);
  --sj-secondary-soft: var(--sj-emerald-50);
  --sj-secondary-ink:  var(--sj-emerald-900);

  --sj-success:        var(--sj-emerald-500);
  --sj-accent:         var(--sj-amber-400);

  /* Brand gradients — multi-stop for richness */
  --sj-gradient:       linear-gradient(120deg,
                         #C2410C 0%, #EA580C 15%, #F97316 30%,
                         #FBBF24 50%,
                         #84CC16 70%, #10B981 88%, #047857 100%);
  --sj-gradient-warm:  linear-gradient(135deg, #EA580C 0%, #F97316 50%, #FBBF24 100%);
  --sj-gradient-cool:  linear-gradient(135deg, #10B981 0%, #059669 50%, #047857 100%);
  --sj-gradient-soft:  linear-gradient(135deg, #FFF7ED 0%, #FEF3C7 50%, #ECFDF5 100%);

  /* Neutrals */
  --sj-ink:            #0B1220;
  --sj-text:           #1E293B;
  --sj-text-soft:      #475569;
  --sj-text-muted:     #64748B;
  --sj-text-faint:     #94A3B8;

  --sj-bg:             #FFFFFF;
  --sj-bg-warm:        #FFFBF7;
  --sj-bg-soft:        #FAFAF9;
  --sj-bg-alt:         #F8FAFC;
  --sj-bg-canvas:      #F1F5F9;

  --sj-border:         #E5E7EB;
  --sj-border-soft:    #F1F5F9;
  --sj-border-warm:    #FED7AA;

  --sj-radius-sm:      8px;
  --sj-radius:         12px;
  --sj-radius-lg:      16px;
  --sj-radius-xl:      24px;

  /* Rich layered shadows */
  --sj-shadow-xs:
    0 1px 2px rgba(15, 23, 42, .04);
  --sj-shadow-sm:
    0 1px 0 rgba(255, 255, 255, .8) inset,
    0 1px 2px rgba(15, 23, 42, .05),
    0 2px 4px rgba(15, 23, 42, .03);
  --sj-shadow:
    0 1px 0 rgba(255, 255, 255, .9) inset,
    0 2px 4px rgba(15, 23, 42, .05),
    0 8px 16px rgba(15, 23, 42, .05);
  --sj-shadow-md:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 4px 8px rgba(15, 23, 42, .04),
    0 12px 24px rgba(15, 23, 42, .07),
    0 24px 48px rgba(15, 23, 42, .05);
  --sj-shadow-lg:
    0 1px 0 rgba(255, 255, 255, 1) inset,
    0 8px 16px rgba(15, 23, 42, .06),
    0 24px 48px rgba(15, 23, 42, .10),
    0 48px 96px rgba(15, 23, 42, .08);

  --sj-shadow-primary:
    0 1px 0 rgba(255, 255, 255, .25) inset,
    0 2px 4px rgba(194, 65, 12, .15),
    0 8px 16px rgba(234, 88, 12, .25),
    0 16px 32px rgba(234, 88, 12, .18);
  --sj-shadow-secondary:
    0 1px 0 rgba(255, 255, 255, .25) inset,
    0 2px 4px rgba(5, 95, 70, .15),
    0 8px 16px rgba(5, 150, 105, .25),
    0 16px 32px rgba(5, 150, 105, .18);

  /* Subtle noise texture for premium feel */
  --sj-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='3'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
}

/* ============================================================
   Base
============================================================ */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-feature-settings: 'cv02','cv03','cv04','cv11','ss01';
  background: var(--sj-bg);
  color: var(--sj-text);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: var(--sj-orange-200); color: var(--sj-orange-900); }

h1, h2, h3, h4, h5, h6 {
  color: var(--sj-ink);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.15;
}
.display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
}

a { color: var(--sj-primary); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--sj-primary-hover); }
p { color: var(--sj-text-soft); }
.text-muted { color: var(--sj-text-muted) !important; }

/* ============================================================
   Buttons
============================================================ */
.btn {
  --bs-btn-padding-x: 1.35rem;
  --bs-btn-padding-y: .6rem;
  --bs-btn-border-radius: 10px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: transform .18s cubic-bezier(.4,0,.2,1),
              box-shadow .18s cubic-bezier(.4,0,.2,1),
              background-color .15s ease, color .15s ease;
}
.btn-lg {
  --bs-btn-padding-x: 1.65rem;
  --bs-btn-padding-y: .85rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-border-radius: 12px;
}
.btn-primary {
  --bs-btn-bg: var(--sj-primary);
  --bs-btn-border-color: var(--sj-primary);
  --bs-btn-hover-bg: var(--sj-primary-hover);
  --bs-btn-hover-border-color: var(--sj-primary-hover);
  --bs-btn-active-bg: var(--sj-primary-hover);
  --bs-btn-active-border-color: var(--sj-primary-hover);
  background-image: linear-gradient(180deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 50%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 1px 2px rgba(194, 65, 12, .25),
    0 4px 12px rgba(234, 88, 12, .25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--sj-shadow-primary); }
.btn-outline-primary {
  /* Text uses orange-700 (#C2410C) for 5.4:1 contrast on white — WCAG AA.
     Border keeps the brand orange-600 so the button still reads "primary". */
  --bs-btn-color: var(--sj-primary-hover);
  --bs-btn-border-color: var(--sj-primary);
  --bs-btn-hover-bg: var(--sj-primary);
  --bs-btn-hover-border-color: var(--sj-primary);
  --bs-btn-hover-color: #fff;
}
.btn-secondary {
  --bs-btn-bg: var(--sj-secondary);
  --bs-btn-border-color: var(--sj-secondary);
  --bs-btn-hover-bg: var(--sj-secondary-hover);
  --bs-btn-hover-border-color: var(--sj-secondary-hover);
  --bs-btn-color: #fff;
  --bs-btn-hover-color: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 4px 12px rgba(5, 150, 105, .25);
}
.btn-secondary:hover { transform: translateY(-1px); box-shadow: var(--sj-shadow-secondary); }
.btn-gradient {
  background: var(--sj-gradient);
  background-size: 180% 180%;
  background-position: 0% 50%;
  border: none;
  color: #fff;
  box-shadow: var(--sj-shadow-primary);
  transition: background-position .5s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-gradient:hover { color: #fff; background-position: 100% 50%; transform: translateY(-1px); }
.btn-light { background: #fff; border-color: var(--sj-border); color: var(--sj-text); }
.btn-light:hover { background: var(--sj-bg-alt); border-color: var(--sj-border); color: var(--sj-ink); }
.btn-dark {
  --bs-btn-bg: var(--sj-ink);
  --bs-btn-border-color: var(--sj-ink);
  --bs-btn-hover-bg: #020617;
}

/* ============================================================
   Navbar
============================================================ */
.sj-navbar {
  background: rgba(255, 251, 247, .82);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  backdrop-filter: saturate(180%) blur(16px);
  border-bottom: 1px solid rgba(229, 231, 235, .6);
  padding: .95rem 0;
}
.sj-navbar .nav-link {
  /* Use --sj-text (#1E293B) instead of --sj-text-soft for stronger contrast
     against both the white default and the scrolled translucent navbar. */
  color: var(--sj-text);
  font-weight: 500;
  font-size: .94rem;
  padding: .45rem .95rem;
  border-radius: 8px;
  transition: color .15s ease, background-color .15s ease;
}
.sj-navbar .nav-link:hover,
.sj-navbar .nav-link.active { color: var(--sj-ink); background: rgba(15,23,42,.04); }
.navbar-brand {
  font-weight: 800;
  letter-spacing: -0.025em;
  font-size: 1.2rem;
  color: var(--sj-ink) !important;
  display: inline-flex; align-items: center;
}
.sj-brand-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 10px;
  background: var(--sj-gradient);
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: #fff;
  margin-right: 10px;
  font-size: 1.05rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 4px 12px rgba(234, 88, 12, .35),
    0 8px 16px rgba(16, 185, 129, .15);
  transition: background-position .6s ease, transform .25s ease;
}
.navbar-brand:hover .sj-brand-mark {
  background-position: 100% 50%;
  transform: rotate(-6deg);
}

/* ============================================================
   Hero — mesh gradient + noise + animated ambient glow
============================================================ */
.sj-hero {
  position: relative;
  padding: 6rem 0 7rem;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 50% at 8% 8%,   rgba(234, 88, 12, .18) 0%, transparent 55%),
    radial-gradient(55% 45% at 95% 5%,  rgba(16, 185, 129, .18) 0%, transparent 55%),
    radial-gradient(40% 50% at 50% 0%,  rgba(251, 191, 36, .12) 0%, transparent 60%),
    radial-gradient(60% 60% at 50% 100%,rgba(132, 204, 22, .10) 0%, transparent 60%),
    linear-gradient(180deg, #FFFBF7 0%, #FFFFFF 60%, #FFFFFF 100%);
}
.sj-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    var(--sj-noise),
    radial-gradient(circle at 1px 1px, rgba(15,23,42,.05) 1px, transparent 0);
  background-size: 200px 200px, 28px 28px;
  mask-image: radial-gradient(ellipse 70% 60% at center, black 35%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at center, black 35%, transparent 80%);
  opacity: .6;
  pointer-events: none;
  z-index: 0;
}
.sj-hero::after {
  content: '';
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  top: -150px; right: -150px;
  background: radial-gradient(circle, rgba(251,146,60,.25) 0%, transparent 60%);
  filter: blur(40px);
  animation: sj-float-glow 14s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}
@keyframes sj-float-glow {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50%      { transform: translate(-40px, 60px) scale(1.1); }
}
.sj-hero > .container { position: relative; z-index: 1; }

.sj-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.7);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--sj-orange-700);
  font-weight: 700;
  font-size: .76rem;
  padding: .35rem .9rem;
  border-radius: 999px;
  letter-spacing: .1em;
  text-transform: uppercase;
  border: 1px solid var(--sj-orange-200);
  box-shadow: 0 1px 2px rgba(234, 88, 12, .08);
}

.sj-hero-badge {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(255,255,255,.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(15,23,42,.08);
  padding: .4rem 1rem .4rem .55rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 500;
  color: var(--sj-text-soft);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 2px 8px rgba(15,23,42,.06);
  margin-bottom: 1.75rem;
}
.sj-hero-badge .sj-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sj-emerald-500);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .2), 0 0 12px rgba(16, 185, 129, .5);
  animation: sj-pulse 2.4s ease-in-out infinite;
}
@keyframes sj-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(16,185,129,.2), 0 0 12px rgba(16,185,129,.4); }
  50%      { box-shadow: 0 0 0 6px rgba(16,185,129,.1), 0 0 16px rgba(16,185,129,.6); }
}

.sj-hero h1 {
  font-size: clamp(2.65rem, 5.2vw, 4rem);
  margin-bottom: 1.25rem;
  letter-spacing: -0.045em;
  font-weight: 800;
}
.sj-gradient-text {
  background: var(--sj-gradient);
  background-size: 200% 200%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sj-shift 10s ease-in-out infinite;
}
@keyframes sj-shift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.sj-hero-sub {
  font-size: 1.15rem;
  color: var(--sj-text-soft);
  max-width: 580px;
  margin-bottom: 2rem;
  line-height: 1.65;
}

/* Glass search bar */
.sj-hero-search {
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, .8);
  border-radius: var(--sj-radius-lg);
  padding: .65rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 4px 12px rgba(15, 23, 42, .04),
    0 24px 48px -8px rgba(234, 88, 12, .15),
    0 16px 32px -8px rgba(16, 185, 129, .12);
  max-width: 720px;
}
.sj-hero-search .form-control {
  border: none;
  font-size: 1rem;
  padding: .7rem .9rem;
  background: transparent;
  color: var(--sj-ink);
}
.sj-hero-search .form-control::placeholder { color: var(--sj-text-muted); }
.sj-hero-search .form-control:focus { box-shadow: none; background: transparent; }
.sj-hero-search .input-group-text {
  background: transparent;
  border: none;
  color: var(--sj-orange-600);
}
.sj-hero-search .btn-primary { border-radius: 12px; padding: .7rem 1.5rem; font-weight: 600; }

.sj-hero-tags { margin-top: 1.25rem; font-size: .9rem; color: var(--sj-text-muted); }
.sj-hero-tags a {
  color: var(--sj-text-soft);
  margin: 0 .15rem;
  padding: .25rem .7rem;
  border-radius: 8px;
  background: rgba(255,255,255,.6);
  border: 1px solid transparent;
  transition: all .15s;
  font-weight: 500;
  font-size: .85rem;
  display: inline-block;
}
.sj-hero-tags a:hover {
  background: #fff;
  color: var(--sj-orange-700);
  border-color: var(--sj-orange-200);
  box-shadow: 0 1px 2px rgba(234,88,12,.1);
}

/* ============================================================
   Hero mockup cards
============================================================ */
.sj-hero-mockup { position: relative; height: 520px; }
.sj-mockup-card {
  position: absolute;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(255, 255, 255, .85);
  border-radius: var(--sj-radius-lg);
  padding: 1.1rem 1.25rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 10px 20px rgba(15, 23, 42, .06),
    0 24px 48px rgba(15, 23, 42, .10),
    0 48px 96px rgba(234, 88, 12, .08);
  width: 330px;
  transition: transform .3s ease;
}
.sj-mockup-card.mc-1 { top: 10px;  right: 0;    animation: float1 7s ease-in-out infinite; }
.sj-mockup-card.mc-2 { top: 175px; right: 100px; animation: float2 8s ease-in-out infinite; z-index: 2;}
.sj-mockup-card.mc-3 { top: 340px; right: 30px;  animation: float3 9s ease-in-out infinite; }
@keyframes float1 { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-14px) rotate(-2deg)} }
@keyframes float2 { 0%,100%{transform:translateY(0) rotate(1deg)}  50%{transform:translateY(-10px) rotate(1deg)} }
@keyframes float3 { 0%,100%{transform:translateY(0) rotate(-1deg)} 50%{transform:translateY(-12px) rotate(-1deg)} }

.mc-logo {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #EA580C 0%, #F97316 50%, #FBBF24 100%);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: .9rem;
  box-shadow: 0 4px 8px rgba(234,88,12,.25), 0 1px 0 rgba(255,255,255,.3) inset;
}
.sj-mockup-card.mc-2 .mc-logo { background: linear-gradient(135deg, #10B981 0%, #34D399 50%, #6EE7B7 100%); box-shadow: 0 4px 8px rgba(16,185,129,.25), 0 1px 0 rgba(255,255,255,.3) inset; }
.sj-mockup-card.mc-3 .mc-logo { background: linear-gradient(135deg, #F97316 0%, #FBBF24 50%, #84CC16 100%); box-shadow: 0 4px 8px rgba(132,204,22,.25), 0 1px 0 rgba(255,255,255,.3) inset; }

/* ============================================================
   Trust strip
============================================================ */
.sj-trust {
  border-top: 1px solid var(--sj-border-soft);
  border-bottom: 1px solid var(--sj-border-soft);
  background:
    linear-gradient(180deg, rgba(255,247,237,.4) 0%, rgba(236,253,245,.3) 100%),
    #FFFFFF;
  padding: 3rem 0;
}
.sj-trust-label {
  text-align: center;
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--sj-text-muted);
  margin-bottom: 1.75rem;
}
.sj-logo-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;
  gap: 2.5rem;
}
.sj-logo-row .sj-fake-logo {
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: -0.025em;
  color: var(--sj-text-soft);
  opacity: .55;
  transition: opacity .2s, color .2s;
}
.sj-logo-row .sj-fake-logo:hover { opacity: 1; color: var(--sj-orange-700); }

/* ============================================================
   Sections
============================================================ */
.sj-section { padding: 6rem 0; }
.sj-section-alt {
  background:
    radial-gradient(60% 50% at 20% 0%,  rgba(234, 88, 12, .04) 0%, transparent 60%),
    radial-gradient(50% 50% at 80% 100%, rgba(16, 185, 129, .04) 0%, transparent 60%),
    var(--sj-bg-warm);
}
.sj-section-title {
  font-size: clamp(2rem, 3.2vw, 2.75rem);
  letter-spacing: -0.035em;
  margin-bottom: .85rem;
  font-weight: 800;
}
.sj-section-sub {
  font-size: 1.1rem;
  color: var(--sj-text-soft);
  max-width: 680px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ============================================================
   Stats
============================================================ */
.sj-stats {
  padding: 4.5rem 0;
  background: #FFFFFF;
  border-top: 1px solid var(--sj-border-soft);
  border-bottom: 1px solid var(--sj-border-soft);
  position: relative;
}
.sj-stats::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(50% 80% at 50% 50%, rgba(234,88,12,.025) 0%, transparent 60%);
  pointer-events: none;
}
.sj-stat-card {
  position: relative;
  padding: 1.5rem 1rem;
  border-radius: var(--sj-radius);
  transition: background .2s;
}
.sj-stat-card:hover { background: rgba(254, 215, 170, .15); }
.sj-stat-number {
  font-size: clamp(2.25rem, 3.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.045em;
  margin-bottom: .3rem;
  background: var(--sj-gradient);
  background-size: 200% 200%;
  background-position: 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  line-height: 1;
}
.sj-stat-label {
  font-size: .92rem;
  color: var(--sj-text-muted);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ============================================================
   Job cards
============================================================ */
.card { border-color: var(--sj-border-soft); border-radius: var(--sj-radius); }
.shadow-sm { box-shadow: var(--sj-shadow-sm) !important; }

.sj-job-card {
  background: #fff;
  border: 1px solid var(--sj-border-soft);
  border-radius: var(--sj-radius);
  transition: transform .25s cubic-bezier(.4,0,.2,1),
              box-shadow .25s cubic-bezier(.4,0,.2,1),
              border-color .25s;
  position: relative;
  overflow: hidden;
}
.sj-job-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--sj-gradient);
  opacity: 0;
  transition: opacity .25s;
}
.sj-job-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--sj-shadow-md);
  border-color: var(--sj-border);
}
.sj-job-card:hover::before { opacity: 1; }

.sj-company-logo {
  width: 48px; height: 48px; min-width: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFFBEB 50%, #ECFDF5 100%);
  color: var(--sj-orange-700);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: 1.05rem;
  border: 1px solid var(--sj-border-soft);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 1px 2px rgba(15,23,42,.04);
}

.badge.bg-light { background: var(--sj-bg-alt) !important; color: var(--sj-text-soft) !important; font-weight: 500; border: 1px solid var(--sj-border-soft); }
.badge.bg-primary-subtle { background: var(--sj-orange-100) !important; color: var(--sj-orange-800) !important; }
.badge.bg-warning { background: #FEF3C7 !important; color: #92400E !important; }
.badge.bg-info-subtle { background: var(--sj-emerald-100) !important; color: var(--sj-emerald-800) !important; }

/* ============================================================
   How-it-works steps
============================================================ */
.sj-step {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: #fff;
  border: 1px solid var(--sj-border-soft);
  border-radius: var(--sj-radius-lg);
  height: 100%;
  transition: transform .25s, box-shadow .25s;
}
.sj-step:hover { transform: translateY(-4px); box-shadow: var(--sj-shadow-md); }
.sj-step-number {
  width: 64px; height: 64px;
  border-radius: 18px;
  background: var(--sj-gradient);
  background-size: 200% 200%;
  background-position: 0% 50%;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.55rem; font-weight: 800;
  margin-bottom: 1.5rem;
  box-shadow: var(--sj-shadow-primary);
  transition: background-position .6s ease;
}
.sj-step:hover .sj-step-number { background-position: 100% 50%; }
.sj-step h3 { margin-bottom: .65rem; font-weight: 700; }
.sj-step p { font-size: .95rem; color: var(--sj-text-soft); line-height: 1.65; }

/* ============================================================
   Feature split cards
============================================================ */
.sj-feature-card {
  background: #fff;
  border: 1px solid var(--sj-border-soft);
  border-radius: var(--sj-radius-lg);
  padding: 2.75rem;
  height: 100%;
  transition: box-shadow .25s, transform .25s;
  position: relative;
  overflow: hidden;
}
.sj-feature-card:hover { box-shadow: var(--sj-shadow-md); transform: translateY(-3px); }
.sj-feature-card-primary {
  background:
    radial-gradient(60% 60% at 0% 0%, rgba(255,255,255,.18) 0%, transparent 50%),
    radial-gradient(60% 60% at 100% 100%, rgba(0,0,0,.12) 0%, transparent 50%),
    linear-gradient(135deg, #C2410C 0%, #EA580C 20%, #F97316 40%, #FBBF24 60%, #84CC16 80%, #10B981 100%);
  color: #fff;
  border: none;
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 12px 24px rgba(234,88,12,.18),
    0 24px 48px rgba(16,185,129,.15);
}
.sj-feature-card-primary::before {
  content: ''; position: absolute; inset: 0;
  background-image: var(--sj-noise);
  background-size: 200px 200px;
  opacity: .15;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.sj-feature-card-primary > * { position: relative; z-index: 1; }
.sj-feature-card-primary h2,
.sj-feature-card-primary p,
.sj-feature-card-primary li { color: rgba(255,255,255,.95); }
.sj-feature-card-primary h2 { color: #fff; }
.sj-feature-card-primary .btn-primary {
  background: #fff; color: var(--sj-primary); border-color: #fff;
  background-image: none;
  box-shadow: 0 1px 0 rgba(255,255,255,1) inset, 0 8px 16px rgba(0,0,0,.15);
}
.sj-feature-card-primary .btn-primary:hover { background: rgba(255,255,255,.95); color: var(--sj-primary-hover); }

.sj-feature-icon {
  width: 60px; height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--sj-orange-50) 0%, var(--sj-orange-100) 100%);
  color: var(--sj-orange-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--sj-orange-200);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 4px 8px rgba(234,88,12,.08);
}
.sj-feature-card-primary .sj-feature-icon {
  background: rgba(255,255,255,.18);
  color: #fff;
  border-color: rgba(255,255,255,.25);
  box-shadow: 0 1px 0 rgba(255,255,255,.3) inset;
}
.sj-feature-icon-accent {
  background: linear-gradient(135deg, var(--sj-emerald-50) 0%, var(--sj-emerald-100) 100%);
  color: var(--sj-emerald-700);
  border-color: var(--sj-emerald-200);
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 4px 8px rgba(16,185,129,.08);
}
.sj-feature-card ul { padding-left: 0; list-style: none; }
.sj-feature-card ul li { padding: .4rem 0 .4rem 2rem; position: relative; }
.sj-feature-card ul li::before {
  content: '\F26B';
  font-family: 'bootstrap-icons';
  position: absolute; left: 0; top: .45rem;
  color: var(--sj-emerald-700);
  background: var(--sj-emerald-50);
  width: 22px; height: 22px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem;
}
.sj-feature-card-primary ul li::before { color: #fff; background: rgba(255,255,255,.2); }

/* ============================================================
   Testimonials
============================================================ */
.sj-testimonial {
  background: #fff;
  border: 1px solid var(--sj-border-soft);
  border-radius: var(--sj-radius-lg);
  padding: 2rem;
  height: 100%;
  transition: box-shadow .25s, transform .25s;
  position: relative;
}
.sj-testimonial::before {
  content: '\201C';
  position: absolute;
  top: 1rem; right: 1.5rem;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--sj-orange-100);
  font-family: Georgia, serif;
  font-weight: 700;
}
.sj-testimonial:hover { box-shadow: var(--sj-shadow); transform: translateY(-2px); }
.sj-testimonial-stars { color: var(--sj-amber-400); margin-bottom: 1rem; font-size: .95rem; }
.sj-testimonial-quote { color: var(--sj-text); font-size: 1.02rem; line-height: 1.7; margin-bottom: 1.5rem; }
.sj-testimonial-author { display: flex; align-items: center; gap: .85rem; }
.sj-testimonial-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--sj-gradient);
  background-size: 200% 200%;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .95rem;
  box-shadow: 0 4px 8px rgba(234,88,12,.2), 0 1px 0 rgba(255,255,255,.3) inset;
}
.sj-testimonial-author-name { font-weight: 700; color: var(--sj-ink); font-size: .95rem; }
.sj-testimonial-author-role { font-size: .82rem; color: var(--sj-text-muted); }

/* ============================================================
   CTA
============================================================ */
.sj-cta {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(50% 60% at 15% 50%, rgba(234, 88, 12, .55) 0%, transparent 60%),
    radial-gradient(50% 60% at 85% 50%, rgba(16, 185, 129, .5) 0%, transparent 60%),
    radial-gradient(40% 50% at 50% 50%, rgba(132, 204, 22, .3) 0%, transparent 60%),
    radial-gradient(60% 40% at 50% 100%, rgba(251, 191, 36, .25) 0%, transparent 60%),
    #0B1220;
  color: #fff;
}
.sj-cta::before {
  content: '';
  position: absolute; inset: 0;
  background-image: var(--sj-noise);
  background-size: 200px 200px;
  opacity: .35;
  mix-blend-mode: overlay;
  pointer-events: none;
}
.sj-cta > .container { position: relative; z-index: 1; }
.sj-cta h2 {
  color: #fff;
  font-size: clamp(2.25rem, 3.5vw, 3rem);
  margin-bottom: 1.25rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}
.sj-cta p { color: rgba(255,255,255,.8); font-size: 1.15rem; max-width: 580px; margin: 0 auto 2.25rem; line-height: 1.6; }
.sj-cta .btn-light {
  background: #fff; color: var(--sj-ink); border-color: #fff; font-weight: 600;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset, 0 8px 24px rgba(0,0,0,.25);
}
.sj-cta .btn-light:hover { background: rgba(255,255,255,.95); }
.sj-cta .btn-outline-light {
  border-color: rgba(255,255,255,.3); color: #fff;
  background: rgba(255,255,255,.05);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sj-cta .btn-outline-light:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ============================================================
   Forms
============================================================ */
.form-control, .form-select {
  border-color: var(--sj-border);
  border-radius: 10px;
  padding: .65rem .9rem;
  transition: border-color .15s, box-shadow .15s;
  font-size: .95rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--sj-orange-400);
  box-shadow: 0 0 0 4px rgba(234, 88, 12, .1);
}
.form-label { font-weight: 500; color: var(--sj-text); font-size: .9rem; margin-bottom: .4rem; }

/* ============================================================
   Footer
============================================================ */
.sj-footer {
  background:
    radial-gradient(50% 70% at 50% 0%, rgba(234,88,12,.06) 0%, transparent 60%),
    #0B1220;
  color: #94A3B8;
  padding: 4.5rem 0 2rem;
  position: relative;
}
.sj-footer h5, .sj-footer h6 { color: #F1F5F9; font-weight: 600; }
.sj-footer .text-uppercase {
  font-size: .72rem !important;
  letter-spacing: .14em;
  font-weight: 700;
  color: #94A3B8 !important;
  margin-bottom: 1.1rem;
  display: block;
}
.sj-footer ul { padding: 0; list-style: none; margin: 0; }
.sj-footer ul li { padding: .4rem 0; }
.sj-footer a {
  color: #CBD5E1;
  font-size: .92rem;
  font-weight: 400;
  transition: color .15s ease;
}
.sj-footer a:hover { color: #FED7AA; }
.sj-footer hr { border-color: rgba(255,255,255,.08); }

/* ============================================================
   Dashboard
============================================================ */
.sj-dashboard {
  background:
    radial-gradient(40% 30% at 0% 0%, rgba(234,88,12,.03) 0%, transparent 60%),
    radial-gradient(40% 30% at 100% 0%, rgba(16,185,129,.03) 0%, transparent 60%),
    var(--sj-bg-canvas);
  min-height: 100vh;
}
.sj-sidebar {
  border: 1px solid var(--sj-border-soft);
  background: #fff;
  border-radius: var(--sj-radius);
  box-shadow: var(--sj-shadow-sm);
}
.sj-sidebar .nav-link {
  color: var(--sj-text-soft);
  border-radius: 8px;
  margin-bottom: 2px;
  padding: .6rem .9rem;
  font-weight: 500;
  font-size: .92rem;
}
.sj-sidebar .nav-link:hover { background: var(--sj-bg-alt); color: var(--sj-ink); }
.sj-sidebar .nav-link.active {
  background: var(--sj-gradient);
  background-size: 200% 200%;
  color: #fff;
  box-shadow: var(--sj-shadow-primary);
}
.sj-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--sj-gradient);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700;
  box-shadow: 0 4px 8px rgba(234,88,12,.2);
}

/* ============================================================
   Misc
============================================================ */
.sj-icon-circle {
  width: 60px; height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--sj-orange-50), var(--sj-emerald-50));
  color: var(--sj-orange-600);
  font-size: 1.5rem;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--sj-orange-100);
}
.sj-description { white-space: pre-wrap; line-height: 1.75; color: var(--sj-text); }
.breadcrumb { font-size: .85rem; }
.breadcrumb-item a { color: var(--sj-text-muted); }
.breadcrumb-item.active { color: var(--sj-text); }

/* ============================================================
   Responsive
============================================================ */
@media (max-width: 991.98px) {
  .sj-hero { padding: 4rem 0 4.5rem; }
  .sj-section { padding: 4rem 0; }
  .sj-hero-mockup { display: none; }
}
@media (max-width: 575.98px) {
  .sj-hero h1 { font-size: 2.3rem; }
  .sj-feature-card { padding: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ============================================================
   GRAND v4 additions — display font, big hero, premium sections
============================================================ */

h1, h2, h3, h4, .sj-section-title, .sj-cta h2, .navbar-brand {
  font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
}
.sj-serif {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* ----- Bigger, grander hero ----- */
.sj-hero { padding: 7rem 0 8rem; }
.sj-hero h1 {
  font-size: clamp(2.85rem, 5.8vw, 4.75rem);
  letter-spacing: -0.05em;
  font-weight: 800;
}
.sj-hero-sub { font-size: 1.2rem; max-width: 600px; }

/* "Backed by" funding indicator */
.sj-funding-pill {
  display: inline-flex; align-items: center; gap: 10px;
  background: linear-gradient(135deg, #FFF7ED 0%, #FFFFFF 50%, #ECFDF5 100%);
  border: 1px solid var(--sj-orange-200);
  border-radius: 999px;
  padding: .45rem 1.1rem .45rem .55rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--sj-orange-800);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 4px 12px rgba(234,88,12,.10);
  margin-bottom: 1.5rem;
}
.sj-funding-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--sj-gradient);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem;
  box-shadow: 0 2px 4px rgba(234,88,12,.3);
}
.sj-funding-pill strong { font-weight: 800; color: var(--sj-orange-900); }
.sj-funding-pill .divider { width: 1px; height: 12px; background: var(--sj-orange-200); }

/* Hero social-proof bar */
.sj-hero-trust {
  display: inline-flex; align-items: center; gap: 14px;
  margin-top: 1.75rem;
  padding: .7rem 1.1rem;
  background: rgba(255,255,255,.7);
  border: 1px solid var(--sj-border-soft);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.sj-avatar-stack { display: inline-flex; }
.sj-stacked-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 2px solid #fff;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: .75rem;
  margin-left: -10px;
  background: var(--sj-gradient);
  background-size: 220% 220%;
}
.sj-avatar-stack .sj-stacked-avatar:first-child { margin-left: 0; background-position: 0% 50%; }
.sj-avatar-stack .sj-stacked-avatar:nth-child(2) { background-position: 30% 50%; }
.sj-avatar-stack .sj-stacked-avatar:nth-child(3) { background-position: 60% 50%; }
.sj-avatar-stack .sj-stacked-avatar:nth-child(4) { background-position: 100% 50%; }
.sj-hero-trust-text { font-size: .82rem; color: var(--sj-text-soft); line-height: 1.2; }
.sj-hero-trust-text strong { color: var(--sj-ink); font-weight: 700; }
.sj-hero-trust-stars { color: var(--sj-amber-400); font-size: .78rem; }

/* ----- Wave divider ----- */
.sj-wave { position: relative; height: 80px; margin-top: -1px; }
.sj-wave svg { display: block; width: 100%; height: 100%; }

/* ----- Press / featured-in strip ----- */
.sj-press {
  padding: 3rem 0;
  border-top: 1px solid var(--sj-border-soft);
  border-bottom: 1px solid var(--sj-border-soft);
  background: #FFFFFF;
}
.sj-press-label {
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--sj-text-muted);
  margin-bottom: 1.5rem;
}
.sj-press-row {
  display: flex; align-items: center; justify-content: space-around;
  flex-wrap: wrap; gap: 2rem;
  opacity: .7;
}
.sj-press-name {
  font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic;
  font-size: 1.55rem;
  color: var(--sj-ink);
  letter-spacing: -0.02em;
}
.sj-press-name.bold {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-style: normal;
  font-weight: 800;
  font-size: 1.4rem;
  letter-spacing: -0.04em;
}

/* ----- Product preview ----- */
.sj-product {
  padding: 7rem 0;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 50% at 0% 30%, rgba(234,88,12,.05) 0%, transparent 50%),
    radial-gradient(60% 50% at 100% 70%, rgba(16,185,129,.05) 0%, transparent 50%),
    var(--sj-bg-warm);
}
.sj-product-window {
  position: relative;
  background: #fff;
  border: 1px solid var(--sj-border);
  border-radius: 20px;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 12px 24px rgba(15,23,42,.08),
    0 32px 64px rgba(15,23,42,.10),
    0 64px 128px rgba(234,88,12,.08),
    0 64px 128px rgba(16,185,129,.06);
  overflow: hidden;
  max-width: 1080px;
  margin: 0 auto;
}
.sj-product-chrome {
  display: flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  background: var(--sj-bg-soft);
  border-bottom: 1px solid var(--sj-border-soft);
}
.sj-product-chrome .dot { width: 12px; height: 12px; border-radius: 50%; }
.sj-product-chrome .dot.r { background: #FF5F57; }
.sj-product-chrome .dot.y { background: #FEBC2E; }
.sj-product-chrome .dot.g { background: #28C840; }
.sj-product-chrome .url {
  margin-left: 12px;
  padding: 4px 12px;
  background: #fff;
  border: 1px solid var(--sj-border-soft);
  border-radius: 6px;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: .78rem;
  color: var(--sj-text-muted);
  flex-grow: 1;
}
.sj-product-body { display: grid; grid-template-columns: 220px 1fr; min-height: 460px; }
.sj-product-sidebar {
  background: var(--sj-bg-soft);
  border-right: 1px solid var(--sj-border-soft);
  padding: 1.25rem .75rem;
}
.sj-product-sidebar .item {
  display: flex; align-items: center; gap: 10px;
  padding: .55rem .75rem;
  font-size: .85rem;
  color: var(--sj-text-soft);
  border-radius: 8px;
  margin-bottom: 2px;
}
.sj-product-sidebar .item.active {
  background: var(--sj-gradient);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 8px rgba(234,88,12,.2);
}
.sj-product-sidebar .item i { font-size: 1rem; }
.sj-product-main { padding: 1.5rem 1.75rem; background: #fff; }
.sj-product-main h4 { font-size: 1.05rem; margin-bottom: .25rem; }
.sj-product-main .sub { color: var(--sj-text-muted); font-size: .85rem; margin-bottom: 1.25rem; }
.sj-product-stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 1.25rem; }
.sj-product-stat {
  padding: .85rem 1rem;
  background: var(--sj-bg-warm);
  border: 1px solid var(--sj-border-soft);
  border-radius: 10px;
}
.sj-product-stat .label { font-size: .68rem; color: var(--sj-text-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.sj-product-stat .value { font-size: 1.4rem; font-weight: 800; color: var(--sj-ink); letter-spacing: -0.02em; }
.sj-product-stat .delta { font-size: .72rem; color: var(--sj-emerald-700); font-weight: 600; }
.sj-product-table {
  border: 1px solid var(--sj-border-soft);
  border-radius: 10px;
  overflow: hidden;
  font-size: .8rem;
}
.sj-product-row {
  display: grid;
  grid-template-columns: 28px 1fr 110px 70px;
  align-items: center;
  gap: 10px;
  padding: .65rem .85rem;
  border-bottom: 1px solid var(--sj-border-soft);
}
.sj-product-row:last-child { border-bottom: 0; }
.sj-product-row .mini-logo {
  width: 28px; height: 28px; border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #EA580C, #F97316);
  color: #fff; font-weight: 800; font-size: .7rem;
}
.sj-product-row:nth-child(2) .mini-logo { background: linear-gradient(135deg, #10B981, #34D399); }
.sj-product-row:nth-child(3) .mini-logo { background: linear-gradient(135deg, #FBBF24, #F59E0B); }
.sj-product-row:nth-child(4) .mini-logo { background: linear-gradient(135deg, #8B5CF6, #A855F7); }
.sj-product-row:nth-child(5) .mini-logo { background: linear-gradient(135deg, #06B6D4, #0EA5E9); }
.sj-product-row .role { color: var(--sj-ink); font-weight: 600; }
.sj-product-row .role .co { color: var(--sj-text-muted); font-weight: 400; margin-left: 6px; font-size: .76rem; }
.sj-product-row .stage {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  background: var(--sj-emerald-50); color: var(--sj-emerald-800);
  font-size: .68rem; font-weight: 700; text-align: center;
}
.sj-product-row .stage.warm { background: var(--sj-orange-50); color: var(--sj-orange-800); }
.sj-product-row .stage.cool { background: #E0F2FE; color: #075985; }
.sj-product-row .match { text-align: right; font-weight: 700; color: var(--sj-emerald-700); }

/* ----- Browse categories ----- */
.sj-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.sj-category-card {
  background: #fff;
  border: 1px solid var(--sj-border-soft);
  border-radius: var(--sj-radius-lg);
  padding: 1.75rem 1.5rem 1.5rem;
  text-decoration: none;
  color: var(--sj-ink);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  position: relative;
  overflow: hidden;
  display: block;
}
.sj-category-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sj-shadow-md);
  border-color: var(--sj-border);
  color: var(--sj-ink);
}
.sj-category-card .cat-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--sj-orange-50), var(--sj-orange-100));
  color: var(--sj-orange-700);
  border: 1px solid var(--sj-orange-200);
}
.sj-category-card:nth-child(2n) .cat-icon { background: linear-gradient(135deg, var(--sj-emerald-50), var(--sj-emerald-100)); color: var(--sj-emerald-700); border-color: var(--sj-emerald-200); }
.sj-category-card:nth-child(3n) .cat-icon { background: linear-gradient(135deg, #FEF3C7, #FDE68A); color: #92400E; border-color: #FCD34D; }
.sj-category-card:nth-child(4n) .cat-icon { background: linear-gradient(135deg, #DBEAFE, #BFDBFE); color: #1E40AF; border-color: #93C5FD; }
.sj-category-card .cat-title { font-weight: 700; margin-bottom: .25rem; font-size: 1.02rem; }
.sj-category-card .cat-count { color: var(--sj-text-muted); font-size: .85rem; }
.sj-category-card::after {
  content: '\F285';
  font-family: 'bootstrap-icons';
  position: absolute;
  bottom: 1.25rem; right: 1.25rem;
  color: var(--sj-text-faint);
  font-size: 1rem;
  opacity: 0; transform: translateX(-4px);
  transition: opacity .2s, transform .2s, color .2s;
}
.sj-category-card:hover::after { opacity: 1; transform: translateX(0); color: var(--sj-orange-600); }

/* ----- Pricing teaser ----- */
.sj-plans { padding: 7rem 0; }
.sj-plan {
  background: #fff;
  border: 1px solid var(--sj-border-soft);
  border-radius: var(--sj-radius-lg);
  padding: 2.25rem;
  height: 100%;
  position: relative;
  transition: transform .2s, box-shadow .2s;
}
.sj-plan:hover { transform: translateY(-3px); box-shadow: var(--sj-shadow-md); }
.sj-plan-featured {
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255,255,255,.18) 0%, transparent 50%),
    linear-gradient(135deg, #C2410C 0%, #EA580C 25%, #F97316 55%, #84CC16 80%, #059669 100%);
  border: none;
  color: #fff;
  box-shadow: 0 24px 48px rgba(234,88,12,.20), 0 16px 32px rgba(16,185,129,.15);
}
.sj-plan-featured h3, .sj-plan-featured .sj-plan-price { color: #fff; }
.sj-plan-featured p, .sj-plan-featured .desc, .sj-plan-featured li { color: rgba(255,255,255,.92); }
.sj-plan-featured .btn-primary { background: #fff; color: var(--sj-orange-700); border-color: #fff; }
.sj-plan-featured .btn-primary:hover { background: rgba(255,255,255,.95); color: var(--sj-orange-800); }
.sj-plan-tag {
  position: absolute;
  top: -12px; left: 2.25rem;
  background: var(--sj-ink); color: #fff;
  font-size: .7rem; font-weight: 700;
  padding: .3rem .85rem;
  border-radius: 999px;
  letter-spacing: .08em; text-transform: uppercase;
}
.sj-plan-featured .sj-plan-tag {
  background: #fff;
  color: var(--sj-orange-700);
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
}
.sj-plan h3 { font-size: 1.2rem; margin-bottom: .25rem; }
.sj-plan .desc { color: var(--sj-text-muted); font-size: .9rem; margin-bottom: 1.25rem; }
.sj-plan-price { font-size: 2.6rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; }
.sj-plan-price .period { font-size: .95rem; font-weight: 500; color: var(--sj-text-muted); letter-spacing: 0; }
.sj-plan-featured .sj-plan-price .period { color: rgba(255,255,255,.75); }
.sj-plan ul { list-style: none; padding: 0; margin: 1.5rem 0; }
.sj-plan ul li { padding: .4rem 0 .4rem 1.85rem; position: relative; font-size: .92rem; }
.sj-plan ul li::before {
  content: '\F26B';
  font-family: 'bootstrap-icons';
  position: absolute; left: 0; top: .35rem;
  color: var(--sj-emerald-600);
}
.sj-plan-featured ul li::before { color: #fff; }

/* ----- Newsletter / pre-footer CTA ----- */
.sj-newsletter {
  margin: 4rem auto -3rem;
  position: relative;
  z-index: 2;
  max-width: 980px;
  background:
    radial-gradient(50% 100% at 0% 50%, rgba(234,88,12,.18) 0%, transparent 60%),
    radial-gradient(50% 100% at 100% 50%, rgba(16,185,129,.18) 0%, transparent 60%),
    #FFFFFF;
  border: 1px solid var(--sj-border);
  border-radius: 24px;
  padding: 3rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 24px 48px rgba(15,23,42,.10),
    0 48px 96px rgba(234,88,12,.08),
    0 64px 128px rgba(16,185,129,.06);
}
.sj-newsletter h3 { font-size: 1.7rem; letter-spacing: -0.03em; margin-bottom: .35rem; }
.sj-newsletter p { color: var(--sj-text-soft); margin-bottom: 1.5rem; }
.sj-newsletter form .form-control {
  padding: .9rem 1rem;
  font-size: .95rem;
  border-radius: 12px;
  border-color: var(--sj-border);
}

/* Mobile */
@media (max-width: 991.98px) {
  .sj-hero { padding: 4.5rem 0 5rem; }
  .sj-product { padding: 4rem 0; }
  .sj-product-body { grid-template-columns: 1fr; }
  .sj-product-sidebar { display: none; }
  .sj-plans { padding: 4rem 0; }
  .sj-newsletter { padding: 2rem; margin: 3rem 1rem -3rem; }
  .sj-product-stat-row { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
  .sj-product-window { border-radius: 14px; }
  .sj-newsletter { padding: 1.75rem; border-radius: 16px; }
}

/* ============================================================
   PLATINUM v5 — denser rhythm, animated headings, live product,
   scroll-reveal, gradient borders on cards
============================================================ */

/* ---- Tighter section rhythm (less air, more impact) ---- */
.sj-hero      { padding: 5rem 0 5.5rem; }
.sj-section   { padding: 4.5rem 0; }
.sj-section + .sj-section { padding-top: 3.5rem; }
.sj-product   { padding: 5rem 0; }
.sj-plans     { padding: 5rem 0; }
.sj-cta       { padding: 5rem 0; }
.sj-trust     { padding: 2.5rem 0; }
.sj-stats     { padding: 3.5rem 0; }
.sj-press     { padding: 2.5rem 0; }

/* ---- Modern animated section headings ---- */
.sj-section-title {
  position: relative;
  display: inline-block;
}
.sj-section-title::after {
  content: '';
  display: block;
  width: 56px;
  height: 4px;
  margin: .85rem auto 0;
  border-radius: 999px;
  background: var(--sj-gradient);
  background-size: 200% 200%;
  background-position: 0% 50%;
  animation: sj-shift 6s ease-in-out infinite;
  box-shadow: 0 2px 8px rgba(234, 88, 12, .25);
}
/* Variant when title sits left-aligned (no center underline) */
.sj-title-left .sj-section-title::after { margin-left: 0; margin-right: 0; }

/* Modern eyebrow with leading dot */
.sj-eyebrow {
  position: relative;
  padding-left: 1.4rem;
}
.sj-eyebrow::before {
  content: '';
  position: absolute;
  left: .7rem; top: 50%;
  transform: translateY(-50%);
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sj-gradient);
  background-size: 200% 200%;
  animation: sj-shift 5s ease-in-out infinite;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, .15);
}

/* ---- Scroll-reveal animation ---- */
.sj-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity .8s cubic-bezier(.16,1,.3,1),
    transform .8s cubic-bezier(.16,1,.3,1);
  will-change: transform, opacity;
}
.sj-reveal.in-view { opacity: 1; transform: translateY(0); }
.sj-reveal-delay-1 { transition-delay: .08s; }
.sj-reveal-delay-2 { transition-delay: .16s; }
.sj-reveal-delay-3 { transition-delay: .24s; }
.sj-reveal-delay-4 { transition-delay: .32s; }
.sj-reveal-delay-5 { transition-delay: .40s; }

/* ---- Premium card hover effects: animated gradient border + glow ---- */
.sj-job-card,
.sj-step,
.sj-feature-card:not(.sj-feature-card-primary),
.sj-testimonial,
.sj-plan:not(.sj-plan-featured),
.sj-category-card {
  position: relative;
  isolation: isolate;
}
.sj-job-card::after,
.sj-step::after,
.sj-feature-card:not(.sj-feature-card-primary)::after,
.sj-testimonial::after,
.sj-plan:not(.sj-plan-featured)::after,
.sj-category-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: var(--sj-gradient);
  background-size: 200% 200%;
  background-position: 0% 50%;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .3s ease, background-position .6s ease;
  pointer-events: none;
  z-index: 1;
}
.sj-job-card:hover::after,
.sj-step:hover::after,
.sj-feature-card:not(.sj-feature-card-primary):hover::after,
.sj-testimonial:hover::after,
.sj-plan:not(.sj-plan-featured):hover::after,
.sj-category-card:hover::before {
  opacity: 1;
  background-position: 100% 50%;
}

/* Soft warm glow behind hovered cards */
.sj-job-card:hover,
.sj-step:hover,
.sj-feature-card:not(.sj-feature-card-primary):hover,
.sj-testimonial:hover,
.sj-plan:not(.sj-plan-featured):hover {
  filter: drop-shadow(0 16px 36px rgba(234, 88, 12, .08))
          drop-shadow(0 24px 48px rgba(16, 185, 129, .06));
}

/* ---- LIVE product preview ---- */
.sj-product-chrome { position: relative; }
.sj-live-dot {
  position: absolute;
  right: 16px; top: 50%;
  transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sj-emerald-700);
}
.sj-live-dot::before {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sj-emerald-500);
  box-shadow: 0 0 0 0 rgba(16,185,129,.7);
  animation: sj-live 1.8s ease-out infinite;
}
@keyframes sj-live {
  0%   { box-shadow: 0 0 0 0   rgba(16,185,129,.7); }
  70%  { box-shadow: 0 0 0 10px rgba(16,185,129,0);  }
  100% { box-shadow: 0 0 0 0   rgba(16,185,129,0);  }
}

/* Animated counters with subtle pulse on the value */
.sj-product-stat .value {
  position: relative;
  animation: sj-fade-up .8s cubic-bezier(.16,1,.3,1) both;
}
.sj-product-stat:nth-child(2) .value { animation-delay: .08s; }
.sj-product-stat:nth-child(3) .value { animation-delay: .16s; }
@keyframes sj-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stagger the matched-jobs rows */
.sj-product-row {
  position: relative;
  animation: sj-row-in .6s cubic-bezier(.16,1,.3,1) both;
  transition: background-color .2s, transform .15s;
  cursor: pointer;
}
.sj-product-row:hover {
  background: var(--sj-orange-50);
}
.sj-product-row:nth-child(1) { animation-delay: .05s; }
.sj-product-row:nth-child(2) { animation-delay: .15s; }
.sj-product-row:nth-child(3) { animation-delay: .25s; }
.sj-product-row:nth-child(4) { animation-delay: .35s; }
.sj-product-row:nth-child(5) { animation-delay: .45s; }
@keyframes sj-row-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Animated match-score "progress" ring under the % */
.sj-product-row .match { position: relative; }
.sj-product-row .match::after {
  content: '';
  display: block;
  height: 3px;
  border-radius: 999px;
  margin-top: 3px;
  width: var(--match, 80%);
  background: var(--sj-gradient);
  background-size: 200% 200%;
  animation: sj-shift 8s ease-in-out infinite;
  box-shadow: 0 2px 4px rgba(234, 88, 12, .2);
}

/* Floating cursor in product preview */
.sj-product-window::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  background: var(--sj-ink);
  border: 2px solid #fff;
  border-radius: 50% 0 50% 50%;
  transform: rotate(-45deg);
  top: 340px; left: 380px;
  pointer-events: none;
  opacity: 0;
  animation: sj-cursor 8s ease-in-out infinite;
  box-shadow: 0 4px 12px rgba(15,23,42,.3);
  z-index: 5;
}
@keyframes sj-cursor {
  0%   { opacity: 0; top: 340px; left: 380px; }
  10%  { opacity: 1; }
  35%  { top: 230px; left: 290px; }
  45%  { transform: rotate(-45deg) scale(.85); }
  55%  { transform: rotate(-45deg) scale(1); }
  75%  { top: 460px; left: 700px; }
  95%  { opacity: 1; }
  100% { opacity: 0; top: 460px; left: 700px; }
}

/* ---- Animated brand text mini-helpers ---- */
.sj-shimmer {
  background: linear-gradient(
    90deg,
    var(--sj-ink) 0%,
    var(--sj-ink) 40%,
    var(--sj-orange-600) 50%,
    var(--sj-ink) 60%,
    var(--sj-ink) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sj-shimmer 4s linear infinite;
}
@keyframes sj-shimmer {
  to { background-position: -200% 0; }
}

/* ---- Press strip — subtle marquee feel ---- */
.sj-press-name { transition: opacity .2s, transform .2s, color .2s; }
.sj-press-name:hover { transform: translateY(-2px); opacity: 1; color: var(--sj-orange-700); }

/* ---- Magnetic button hover (subtle scale + glow) ---- */
.btn-primary, .btn-outline-primary, .btn-light {
  position: relative;
  overflow: hidden;
}
.btn-primary::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent);
  transform: translateX(-100%);
  transition: transform .6s ease;
  pointer-events: none;
}
.btn-primary:hover::before { transform: translateX(100%); }

/* ---- Hero mockup match badge pulse ---- */
.mc-match {
  position: relative;
}
.mc-match::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid var(--sj-emerald-300);
  animation: sj-mc-pulse 2.5s ease-out infinite;
  pointer-events: none;
}
@keyframes sj-mc-pulse {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* ---- Category cards: hover gradient backdrop ---- */
.sj-category-card { overflow: hidden; }
.sj-category-card .cat-icon { transition: transform .3s ease, background .3s ease; }
.sj-category-card:hover .cat-icon { transform: rotate(-6deg) scale(1.05); }

/* ---- Stat cards: subtle pulse on hover ---- */
.sj-stat-card { transition: transform .25s ease, background .2s; }
.sj-stat-card:hover { transform: scale(1.03); }

/* ---- Testimonial quote mark animation ---- */
.sj-testimonial::before {
  transition: color .25s, transform .25s;
}
.sj-testimonial:hover::before {
  color: var(--sj-orange-300);
  transform: scale(1.1) rotate(-3deg);
}

/* ---- Better gap between hero and the wave ---- */
.sj-hero { padding-bottom: 3.5rem; }
.sj-hero + .sj-wave + .sj-press { padding-top: 2rem; }

/* ---- Reduce big top margins on certain sections ---- */
.sj-press + .sj-stats { padding-top: 3rem; }

/* ---- Cleaner mobile rhythm ---- */
@media (max-width: 991.98px) {
  .sj-hero    { padding: 3.5rem 0 3rem; }
  .sj-section { padding: 3rem 0; }
  .sj-product { padding: 3rem 0; }
  .sj-plans   { padding: 3rem 0; }
  .sj-cta     { padding: 3.5rem 0; }
  .sj-product-window::after { display: none; }
}

/* ---- Navbar shadow on scroll ---- */
.sj-navbar { transition: box-shadow .25s ease, background-color .25s ease, border-color .25s ease; }
.sj-navbar.is-scrolled {
  box-shadow: 0 4px 16px rgba(15, 23, 42, .06);
  background: rgba(255, 255, 255, .92);
  border-bottom-color: var(--sj-border);
}

/* ============================================================
   PLATINUM v6 — gradient text on all titles, full-spectrum
   step numbers, animated background screens between sections
============================================================ */

/* ---- Section titles: full gradient text with drift animation ---- */
.sj-section-title {
  background: linear-gradient(120deg,
    #C2410C 0%,
    #EA580C 10%,
    #F97316 25%,
    #FBBF24 45%,
    #84CC16 65%,
    #10B981 85%,
    #047857 100%);
  background-size: 220% 220%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sj-shift 9s ease-in-out infinite;
}

/* Soften the underline now that the title itself is gradient */
.sj-section-title::after {
  height: 3px;
  width: 48px;
  opacity: .8;
}

/* Hero h1 — second-line gradient already, primary line stays ink */
.sj-hero h1 { color: var(--sj-ink); }

/* CTA & dark-bg section titles need to stay white (gradient text reads bad on dark) */
.sj-cta h2,
.sj-feature-card-primary h2,
.sj-plan-featured h3 {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  -webkit-text-fill-color: initial;
  color: #fff;
  animation: none;
}

/* ---- Step numbers: full-spectrum gradient ---- */
.sj-step-number {
  background: linear-gradient(135deg,
    #EA580C 0%, #F97316 20%, #FBBF24 45%, #84CC16 70%, #10B981 100%);
  background-size: 100% 100%;
}

/* ---- Card heading polish on hover: gradient text reveal ---- */
.sj-job-card h3,
.sj-feature-card:not(.sj-feature-card-primary) h2,
.sj-plan:not(.sj-plan-featured) h3 {
  transition: background .3s ease, color .3s ease;
}
.sj-job-card:hover h3 a,
.sj-feature-card:not(.sj-feature-card-primary):hover h2,
.sj-plan:not(.sj-plan-featured):hover h3 {
  background: linear-gradient(120deg, #EA580C 0%, #F97316 40%, #10B981 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sj-shift 6s ease-in-out infinite;
}

/* ============================================================
   Background gradient screens — page comes alive
============================================================ */

/* Sections with multiple gradient washes drifting across them */
.sj-section,
.sj-stats,
.sj-product,
.sj-plans {
  position: relative;
  overflow: hidden;
}

/* Animated orange-emerald wash on alternating sections */
.sj-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(45% 60% at 0% 20%,  rgba(234, 88, 12,  .08) 0%, transparent 60%),
    radial-gradient(40% 60% at 100% 80%, rgba(16, 185, 129, .08) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
  animation: sj-wash 18s ease-in-out infinite alternate;
}
.sj-section > .container { position: relative; z-index: 1; }

@keyframes sj-wash {
  0%   { transform: translate(0, 0); }
  50%  { transform: translate(20px, -20px); }
  100% { transform: translate(-20px, 20px); }
}

/* Alternate sections get a different gradient wash direction */
.sj-section.sj-section-alt::before {
  background:
    radial-gradient(50% 60% at 100% 20%, rgba(251, 191, 36, .10) 0%, transparent 60%),
    radial-gradient(40% 60% at 0% 80%,   rgba(132, 204, 22, .08) 0%, transparent 60%);
}

/* Plans section gets warmer washes */
.sj-plans { background: var(--sj-bg-warm); }
.sj-plans::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 50% at 10% 30%, rgba(234, 88, 12, .08) 0%, transparent 60%),
    radial-gradient(40% 50% at 90% 70%, rgba(16, 185, 129, .08) 0%, transparent 60%),
    radial-gradient(60% 40% at 50% 100%, rgba(251, 191, 36, .06) 0%, transparent 60%);
  pointer-events: none;
  animation: sj-wash 20s ease-in-out infinite alternate;
}
.sj-plans > .container { position: relative; z-index: 1; }

/* Stats section subtle warmth */
.sj-stats { background: linear-gradient(180deg, #FFFFFF 0%, #FFFBF7 50%, #FFFFFF 100%); }

/* ============================================================
   Section-divider blur strip — animated rainbow ribbon between sections
============================================================ */
.sj-rainbow-strip {
  height: 3px;
  background: var(--sj-gradient);
  background-size: 300% 300%;
  animation: sj-shift 6s ease-in-out infinite;
  opacity: .6;
}

/* ============================================================
   Eyebrow polish — rotate background for shimmer
============================================================ */
.sj-eyebrow {
  background:
    linear-gradient(135deg, rgba(255,247,237,.85) 0%, rgba(255,255,255,.85) 50%, rgba(236,253,245,.85) 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  animation: sj-eyebrow-drift 8s ease-in-out infinite;
}
@keyframes sj-eyebrow-drift {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ============================================================
   Decorative animated mesh on hero "trust" pill background
============================================================ */
.sj-hero-trust {
  background:
    linear-gradient(135deg, rgba(255,247,237,.7) 0%, rgba(255,255,255,.7) 50%, rgba(236,253,245,.7) 100%);
  background-size: 200% 200%;
  animation: sj-eyebrow-drift 12s ease-in-out infinite;
}

/* ============================================================
   Mockup match badges — fuller spectrum
============================================================ */
.mc-match {
  background: linear-gradient(135deg, var(--sj-emerald-50), #DCFCE7);
  color: var(--sj-emerald-800);
  border-color: var(--sj-emerald-200);
}

/* ============================================================
   Sticky in the eyes — h1, h2 hover sheen on hero
============================================================ */
.sj-hero h1 .sj-gradient-text {
  background-size: 280% 280%;
  animation: sj-shift 8s ease-in-out infinite;
}

/* ============================================================
   Subtle parallax-feel ambient blobs on stats/cta sections
============================================================ */
.sj-stats::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(234,88,12,.06) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  filter: blur(60px);
  animation: sj-orbit 22s linear infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes sj-orbit {
  0%   { transform: translate(-50%, -50%) rotate(0deg) translateX(0); }
  100% { transform: translate(-50%, -50%) rotate(360deg) translateX(0); }
}
.sj-stats > .container { position: relative; z-index: 1; }

/* ============================================================
   PLATINUM v7 — smoke-flow effects on cards
   Drifting gradient blobs + conic icon halos + shimmer sweeps
============================================================ */

/* ---- Card smoke flow: animated multi-radial drifting inside cards ---- */
.sj-category-card,
.sj-job-card,
.sj-step,
.sj-feature-card:not(.sj-feature-card-primary),
.sj-plan:not(.sj-plan-featured),
.sj-testimonial {
  background-image:
    radial-gradient(40% 40% at 15% 20%,  rgba(234, 88, 12,  .07) 0%, transparent 60%),
    radial-gradient(35% 35% at 85% 80%,  rgba(16, 185, 129, .07) 0%, transparent 60%),
    radial-gradient(30% 30% at 70% 30%,  rgba(251, 191, 36, .05) 0%, transparent 60%),
    linear-gradient(#fff, #fff);
  background-size: 220% 220%, 200% 200%, 180% 180%, 100% 100%;
  background-position: 0% 0%, 100% 100%, 50% 50%, 0% 0%;
  animation: sj-card-smoke 18s ease-in-out infinite alternate;
}
@keyframes sj-card-smoke {
  0%   { background-position: 0% 0%,   100% 100%, 50% 50%,  0% 0%; }
  50%  { background-position: 60% 30%, 40% 70%,  20% 80%,  0% 0%; }
  100% { background-position: 30% 60%, 70% 30%,  80% 20%,  0% 0%; }
}

/* Vary smoke colors per card position for visual richness */
.sj-category-card:nth-child(3n+1),
.sj-job-card:nth-child(3n+1) {
  background-image:
    radial-gradient(40% 40% at 15% 20%, rgba(234, 88, 12, .09) 0%, transparent 60%),
    radial-gradient(35% 35% at 85% 80%, rgba(251, 191, 36, .07) 0%, transparent 60%),
    radial-gradient(30% 30% at 70% 30%, rgba(132, 204, 22, .05) 0%, transparent 60%),
    linear-gradient(#fff, #fff);
}
.sj-category-card:nth-child(3n+2),
.sj-job-card:nth-child(3n+2) {
  background-image:
    radial-gradient(40% 40% at 15% 20%, rgba(16, 185, 129, .09) 0%, transparent 60%),
    radial-gradient(35% 35% at 85% 80%, rgba(234, 88, 12, .06) 0%, transparent 60%),
    radial-gradient(30% 30% at 70% 30%, rgba(168, 85, 247, .05) 0%, transparent 60%),
    linear-gradient(#fff, #fff);
}
.sj-category-card:nth-child(3n),
.sj-job-card:nth-child(3n) {
  background-image:
    radial-gradient(40% 40% at 15% 20%, rgba(251, 191, 36, .09) 0%, transparent 60%),
    radial-gradient(35% 35% at 85% 80%, rgba(16, 185, 129, .07) 0%, transparent 60%),
    radial-gradient(30% 30% at 70% 30%, rgba(234, 88, 12, .05) 0%, transparent 60%),
    linear-gradient(#fff, #fff);
}

/* On hover: accelerate the smoke + intensify */
.sj-category-card:hover,
.sj-job-card:hover,
.sj-step:hover,
.sj-feature-card:not(.sj-feature-card-primary):hover,
.sj-plan:not(.sj-plan-featured):hover,
.sj-testimonial:hover {
  animation-duration: 6s;
}

/* ---- Shimmer sweep across cards on hover ---- */
.sj-category-card,
.sj-job-card,
.sj-step,
.sj-plan:not(.sj-plan-featured) {
  position: relative;
}

/* Use a child layer via box-shadow trick won't work for sweep; use ::before swap.
   Conflict: ::before already used for gradient border. Move shimmer to inset
   background-image animated layer combined into background. */

/* Card light-sweep on hover (uses background-image extra layer) */
@keyframes sj-light-sweep {
  0%   { transform: translateX(-120%) skewX(-20deg); opacity: 0; }
  20%  { opacity: .8; }
  100% { transform: translateX(220%)  skewX(-20deg); opacity: 0; }
}

.sj-category-card,
.sj-job-card,
.sj-step,
.sj-plan:not(.sj-plan-featured) {
  --sweep-display: none;
}
.sj-category-card:hover,
.sj-job-card:hover,
.sj-step:hover,
.sj-plan:not(.sj-plan-featured):hover {
  --sweep-display: block;
}
/* Light-sweep inside a child mask via box-shadow not viable.
   Use a backgrounded overlay layered on existing pseudo. The card's
   ::before/::after already used for border ring + arrow. Use background-image
   tied to an :hover-only animated mask layer. */

/* ---- Icon halo: conic gradient rotating behind category icons ---- */
.sj-category-card .cat-icon {
  position: relative;
  z-index: 1;
  isolation: isolate;
}
.sj-category-card .cat-icon::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    transparent 0%,
    rgba(234, 88, 12, .25) 18%,
    transparent 36%,
    rgba(16, 185, 129, .25) 54%,
    transparent 72%,
    rgba(251, 191, 36, .25) 90%,
    transparent 100%
  );
  border-radius: 16px;
  z-index: -1;
  opacity: 0;
  animation: sj-spin 6s linear infinite;
  filter: blur(8px);
  transition: opacity .3s ease;
}
.sj-category-card:hover .cat-icon::after { opacity: 1; }
@keyframes sj-spin {
  to { transform: rotate(360deg); }
}

/* ---- Floating particle dots inside category cards on hover ---- */
.sj-category-card::after {
  /* Re-style the existing arrow indicator with a small breath animation */
  animation: sj-breathe 2.5s ease-in-out infinite;
}
@keyframes sj-breathe {
  0%, 100% { transform: translateX(0)    scale(1); }
  50%      { transform: translateX(2px)  scale(1.08); }
}

/* ---- Subtle title color-shift on category cards as smoke flows ---- */
.sj-category-card .cat-title {
  transition: background .3s, color .3s;
}
.sj-category-card:hover .cat-title {
  background: linear-gradient(120deg, var(--sj-orange-700) 0%, var(--sj-emerald-700) 100%);
  background-size: 200% 200%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: sj-shift 5s ease-in-out infinite;
}

/* ---- Stat cards smoke + scale on hover ---- */
.sj-stat-card {
  background-image:
    radial-gradient(50% 50% at 50% 0%, rgba(234, 88, 12, .06) 0%, transparent 60%);
  background-size: 150% 150%;
  background-position: 0% 0%;
  animation: sj-card-smoke 22s ease-in-out infinite alternate;
}

/* ---- Step cards smoke per position ---- */
.sj-step:nth-child(1) {
  background-image:
    radial-gradient(40% 40% at 50% 0%, rgba(234, 88, 12, .08) 0%, transparent 60%),
    radial-gradient(40% 40% at 50% 100%, rgba(251, 191, 36, .06) 0%, transparent 60%),
    linear-gradient(#fff, #fff);
}
.sj-step:nth-child(2) {
  background-image:
    radial-gradient(40% 40% at 50% 0%, rgba(251, 191, 36, .08) 0%, transparent 60%),
    radial-gradient(40% 40% at 50% 100%, rgba(132, 204, 22, .06) 0%, transparent 60%),
    linear-gradient(#fff, #fff);
}
.sj-step:nth-child(3) {
  background-image:
    radial-gradient(40% 40% at 50% 0%, rgba(16, 185, 129, .08) 0%, transparent 60%),
    radial-gradient(40% 40% at 50% 100%, rgba(234, 88, 12, .06) 0%, transparent 60%),
    linear-gradient(#fff, #fff);
}
.sj-step:hover { transform: translateY(-6px); }

/* ---- Reduce motion safety ---- */
@media (prefers-reduced-motion: reduce) {
  .sj-category-card,
  .sj-job-card,
  .sj-step,
  .sj-feature-card:not(.sj-feature-card-primary),
  .sj-plan:not(.sj-plan-featured),
  .sj-testimonial,
  .sj-stat-card,
  .sj-category-card::after,
  .sj-category-card .cat-icon::after {
    animation: none !important;
  }
}

/* ============================================================
   PLATINUM v8 — CLEANUP
   Strip the visual noise. Restore clean white SaaS aesthetic.
   Keep ONLY: gradient hero, gradient section titles, step numbers,
   stat counters, scroll reveal, navbar shadow, LIVE indicator.
============================================================ */

/* ---- Restore plain white sections (kill the wash overlays) ---- */
.sj-section::before,
.sj-section.sj-section-alt::before,
.sj-plans::before,
.sj-stats::after {
  display: none !important;
}
.sj-stats   { background: #FFFFFF !important; }
.sj-plans   { background: var(--sj-bg-warm) !important; }
.sj-section:not(.sj-section-alt) { background: #FFFFFF; }
.sj-section.sj-section-alt        { background: var(--sj-bg-soft); }

/* ---- Restore clean white cards (kill smoke-flow backgrounds) ---- */
.sj-category-card,
.sj-job-card,
.sj-step,
.sj-feature-card:not(.sj-feature-card-primary),
.sj-plan:not(.sj-plan-featured),
.sj-testimonial,
.sj-stat-card,
.sj-category-card:nth-child(3n+1),
.sj-category-card:nth-child(3n+2),
.sj-category-card:nth-child(3n),
.sj-job-card:nth-child(3n+1),
.sj-job-card:nth-child(3n+2),
.sj-job-card:nth-child(3n),
.sj-step:nth-child(1),
.sj-step:nth-child(2),
.sj-step:nth-child(3) {
  background-image: none !important;
  background-color: #FFFFFF !important;
  animation: none !important;
}

/* ---- Kill gradient borders on card hover (the rainbow mask trick) ---- */
.sj-job-card::after,
.sj-step::after,
.sj-feature-card:not(.sj-feature-card-primary)::after,
.sj-testimonial::after,
.sj-plan:not(.sj-plan-featured)::after,
.sj-category-card::before {
  display: none !important;
}

/* ---- Restore the simple arrow on category cards ---- */
.sj-category-card::after {
  content: '\F285' !important;
  font-family: 'bootstrap-icons' !important;
  position: absolute !important;
  bottom: 1.25rem !important;
  right: 1.25rem !important;
  color: var(--sj-text-faint) !important;
  font-size: 1rem !important;
  opacity: 0 !important;
  transform: translateX(-4px) !important;
  transition: opacity .2s, transform .2s, color .2s !important;
  animation: none !important;
  display: block !important;
  background: none !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  padding: 0 !important;
  -webkit-mask: none !important;
          mask: none !important;
}
.sj-category-card:hover::after {
  opacity: 1 !important;
  transform: translateX(0) !important;
  color: var(--sj-orange-600) !important;
}

/* ---- Kill the conic icon halos (too busy) ---- */
.sj-category-card .cat-icon::after,
.sj-category-card .cat-icon::before {
  display: none !important;
}

/* ---- Kill card-heading hover gradient (overkill) ---- */
.sj-job-card:hover h3 a,
.sj-feature-card:not(.sj-feature-card-primary):hover h2,
.sj-plan:not(.sj-plan-featured):hover h3,
.sj-category-card:hover .cat-title {
  background: none !important;
  -webkit-background-clip: initial !important;
          background-clip: initial !important;
  -webkit-text-fill-color: initial !important;
  color: var(--sj-ink) !important;
  animation: none !important;
}

/* ---- Soften the For-candidates feature card to a deep warm gradient
        (no more orange-yellow-green rainbow) ---- */
.sj-feature-card-primary {
  background:
    radial-gradient(60% 60% at 0% 0%, rgba(255,255,255,.18) 0%, transparent 50%),
    radial-gradient(50% 50% at 100% 100%, rgba(0,0,0,.15) 0%, transparent 50%),
    linear-gradient(135deg, #9A3412 0%, #C2410C 35%, #EA580C 70%, #F97316 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.2) inset,
    0 12px 24px rgba(194,65,12,.20),
    0 24px 48px rgba(194,65,12,.15) !important;
}

/* ---- Kill rainbow strip separators ---- */
.sj-rainbow-strip { display: none !important; }

/* ---- Kill orbiting blob on stats ---- */
.sj-stats::before,
.sj-stats::after { display: none !important; }

/* ---- Stop eyebrow drift + hero-trust drift (too busy) ---- */
.sj-eyebrow,
.sj-hero-trust { animation: none !important; }

/* ---- Stop the cursor that animates inside product preview ---- */
.sj-product-window::after { display: none !important; }

/* ---- Section title underline — smaller, more refined ---- */
.sj-section-title::after {
  width: 44px !important;
  height: 3px !important;
  opacity: .7 !important;
  margin-top: .75rem !important;
}

/* ---- Reduce hero noise overlay opacity ---- */
.sj-hero::before { opacity: .25 !important; }

/* ---- Restore clean card hover (just lift + soft shadow) ---- */
.sj-job-card,
.sj-step,
.sj-feature-card:not(.sj-feature-card-primary),
.sj-plan:not(.sj-plan-featured),
.sj-testimonial,
.sj-category-card {
  transition:
    transform .2s cubic-bezier(.4,0,.2,1),
    box-shadow .2s cubic-bezier(.4,0,.2,1),
    border-color .2s !important;
  filter: none !important;
}
.sj-job-card:hover,
.sj-step:hover,
.sj-feature-card:not(.sj-feature-card-primary):hover,
.sj-plan:not(.sj-plan-featured):hover,
.sj-testimonial:hover,
.sj-category-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--sj-shadow-md) !important;
  border-color: var(--sj-border) !important;
  filter: none !important;
}

/* ---- Match-card pulse (in hero mockup) — too much; remove ring pulse ---- */
.mc-match::after { display: none !important; }

/* ---- Press strip restored to clean ---- */
.sj-press { background: #FFFFFF !important; }

/* ---- Trust strip restored ---- */
.sj-trust { background: var(--sj-bg-soft) !important; }

/* ============================================================
   PLATINUM v9 — GORGEOUS PASS, section by section
   Small tasteful refinements. No more bulk effects.
============================================================ */

/* ============ 1. NAVBAR ============ */
.sj-navbar { padding: 1rem 0 !important; }
.sj-navbar .navbar-brand { font-size: 1.25rem; }
.sj-navbar .nav-link { font-size: .92rem; }

/* ============ 2. HERO ============ */
/* Larger, more confident headline; tighter rhythm */
.sj-hero { padding: 5.5rem 0 5rem !important; }
.sj-hero h1 {
  font-size: clamp(2.75rem, 5.6vw, 4.5rem) !important;
  letter-spacing: -0.048em !important;
  line-height: 1.05 !important;
  margin-bottom: 1.5rem !important;
}
.sj-hero-sub {
  font-size: 1.18rem !important;
  line-height: 1.6 !important;
  color: var(--sj-text-soft) !important;
  max-width: 600px !important;
}
.sj-funding-pill {
  margin-bottom: 1.75rem !important;
  font-size: .82rem !important;
}

/* Search bar — taller, more premium */
.sj-hero-search {
  padding: .7rem !important;
  border-radius: 18px !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 8px 24px rgba(15, 23, 42, .06),
    0 24px 48px -8px rgba(234, 88, 12, .12) !important;
}
.sj-hero-search .form-control { font-size: 1.02rem !important; padding: .8rem 1rem !important; }
.sj-hero-search .btn-primary { padding: .8rem 1.65rem !important; font-size: 1rem !important; border-radius: 12px !important; }

/* ============ 3. PRESS strip — refined italic serif ============ */
.sj-press { padding: 2.75rem 0 !important; }
.sj-press-label { font-size: .74rem !important; letter-spacing: .16em !important; }
.sj-press-name { font-size: 1.5rem !important; opacity: .55; }
.sj-press-name.bold { font-size: 1.3rem !important; }

/* ============ 4. STATS — bolder, cleaner ============ */
.sj-stats { padding: 4rem 0 !important; }
.sj-stat-number {
  font-size: clamp(2.5rem, 4vw, 3.25rem) !important;
  letter-spacing: -0.05em !important;
}
.sj-stat-label {
  font-size: .9rem !important;
  font-weight: 500 !important;
  margin-top: .3rem !important;
}

/* ============ 5. FEATURED JOBS — top-edge gradient accent (always-on, animated) ============ */
.sj-job-card { overflow: hidden !important; }
.sj-job-card::before {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  top: 0; left: 0; right: 0; bottom: auto;
  height: 3px !important;
  background: var(--sj-gradient) !important;
  background-size: 300% 100% !important;
  background-position: 0% 50% !important;
  opacity: .55 !important;                /* subtle baseline */
  transition: opacity .25s ease, height .25s ease !important;
  animation: sjCardRoll 8s linear infinite !important;
  z-index: 2 !important;
}
.sj-job-card:hover::before {
  opacity: 1 !important;
  height: 4px !important;                 /* slight thicken on hover */
  animation-duration: 3s !important;       /* speed up the roll */
}
@keyframes sjCardRoll {
  0%   { background-position:   0% 50%; }
  100% { background-position: 300% 50%; }
}
@media (prefers-reduced-motion: reduce) {
  .sj-job-card::before { animation: none !important; }
}
.sj-job-card .card-body { padding: 1.5rem !important; }
.sj-job-card h3 a { color: var(--sj-ink) !important; transition: color .2s; }
.sj-job-card:hover h3 a { color: var(--sj-orange-700) !important; }

/* ============ 6. PRODUCT PREVIEW ============ */
.sj-product { padding: 5rem 0 !important; }
.sj-product-window {
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 16px 32px rgba(15,23,42,.07),
    0 40px 80px rgba(15,23,42,.10),
    0 60px 120px rgba(234,88,12,.05) !important;
}

/* ============ 7. HOW IT WORKS — bigger step numbers ============ */
.sj-step-number {
  width: 68px !important;
  height: 68px !important;
  font-size: 1.6rem !important;
  border-radius: 20px !important;
}
.sj-step { padding: 2.25rem 1.75rem !important; }

/* ============ 8. BROWSE CATEGORIES — cleaner spacing ============ */
.sj-category-card {
  padding: 1.75rem 1.5rem 1.5rem !important;
  border-radius: 16px !important;
}
.sj-category-card .cat-icon {
  width: 48px !important;
  height: 48px !important;
  font-size: 1.3rem !important;
  margin-bottom: 1.1rem !important;
  border-radius: 12px !important;
}
.sj-category-card .cat-title { font-size: 1.05rem !important; margin-bottom: .25rem !important; }
.sj-category-card .cat-count { font-size: .85rem !important; }

/* ============ 9. LATEST JOBS list ============ */
.list-group-item-action.py-3.px-4 {
  padding: 1.1rem 1.5rem !important;
  transition: background-color .15s ease, padding-left .15s ease;
}
.list-group-item-action.py-3.px-4:hover {
  background: var(--sj-orange-50) !important;
  padding-left: 1.75rem !important;
}
.list-group-item-action.py-3.px-4:hover .fw-bold { color: var(--sj-orange-700); }

/* ============ 10. PRICING — refined featured plan ============ */
.sj-plans { padding: 5rem 0 !important; }
.sj-plan { padding: 2.25rem !important; border-radius: 18px !important; }
.sj-plan-featured {
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(255,255,255,.18) 0%, transparent 50%),
    radial-gradient(70% 60% at 50% 100%, rgba(0,0,0,.15) 0%, transparent 50%),
    linear-gradient(140deg, #7C2D12 0%, #9A3412 25%, #C2410C 55%, #EA580C 100%) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,.18) inset,
    0 16px 32px rgba(124,45,18,.18),
    0 32px 64px rgba(194,65,12,.20) !important;
}
.sj-plan-price { font-size: 2.4rem !important; }
.sj-plan-tag {
  font-size: .68rem !important;
  letter-spacing: .12em !important;
  padding: .35rem 1rem !important;
}

/* ============ 11. FOR CANDIDATES / EMPLOYERS ============ */
.sj-feature-card { padding: 2.5rem !important; border-radius: 20px !important; }
.sj-feature-icon {
  width: 60px !important;
  height: 60px !important;
  font-size: 1.5rem !important;
  border-radius: 16px !important;
}

/* ============ 12. TESTIMONIALS — premium gradient ring on avatar ============ */
.sj-testimonial { padding: 2rem !important; border-radius: 18px !important; }
.sj-testimonial-avatar {
  position: relative;
  isolation: isolate;
}
.sj-testimonial-avatar::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sj-orange-500), var(--sj-amber-400), var(--sj-emerald-500));
  z-index: -1;
}
.sj-testimonial-avatar::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--sj-gradient);
  z-index: -1;
}
.sj-testimonial::before {
  font-size: 4rem !important;
  top: 1.25rem !important;
  right: 1.5rem !important;
  color: var(--sj-orange-100) !important;
}
.sj-testimonial-quote { font-size: 1.02rem !important; line-height: 1.7 !important; }
.sj-testimonial-stars { color: var(--sj-amber-400) !important; }

/* ============ 13. NEWSLETTER ============ */
.sj-newsletter {
  border-radius: 24px !important;
  padding: 2.75rem !important;
  background:
    radial-gradient(40% 100% at 0% 50%, rgba(234,88,12,.14) 0%, transparent 60%),
    radial-gradient(40% 100% at 100% 50%, rgba(16,185,129,.12) 0%, transparent 60%),
    #FFFFFF !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 16px 32px rgba(15,23,42,.08),
    0 32px 64px rgba(234,88,12,.06) !important;
}
.sj-newsletter h3 { font-size: 1.65rem !important; letter-spacing: -0.03em !important; }
.sj-newsletter form .form-control {
  padding: .85rem 1rem !important;
  border-radius: 12px !important;
  font-size: .95rem !important;
}

/* ============ 14. FINAL CTA — dark navy with refined mesh ============ */
.sj-cta {
  padding: 5.5rem 0 !important;
  background:
    radial-gradient(50% 60% at 18% 50%, rgba(234, 88, 12, .50) 0%, transparent 60%),
    radial-gradient(50% 60% at 82% 50%, rgba(16, 185, 129, .45) 0%, transparent 60%),
    radial-gradient(40% 50% at 50% 50%, rgba(251, 191, 36, .20) 0%, transparent 60%),
    #0B1220 !important;
}
.sj-cta h2 {
  font-size: clamp(2.2rem, 3.4vw, 2.9rem) !important;
  letter-spacing: -0.04em !important;
  margin-bottom: 1.1rem !important;
}
.sj-cta p { font-size: 1.13rem !important; max-width: 580px !important; }
.sj-cta .btn-lg { padding: .9rem 1.85rem !important; font-size: 1rem !important; }

/* ============ 15. FOOTER — already clean ============ */
.sj-footer { padding: 4rem 0 2rem !important; }
.sj-footer .text-uppercase { font-size: .72rem !important; letter-spacing: .14em !important; }

/* ============ Global polish ============ */
/* Smoother eyebrow */
.sj-eyebrow {
  font-size: .74rem !important;
  letter-spacing: .12em !important;
  padding: .35rem .9rem .35rem 1.45rem !important;
  background: #FFFFFF !important;
  border: 1px solid var(--sj-orange-200) !important;
  box-shadow: 0 1px 2px rgba(234,88,12,.06) !important;
}

/* Section title — tighter and refined */
.sj-section-title {
  font-size: clamp(2rem, 3.4vw, 2.65rem) !important;
  letter-spacing: -0.035em !important;
  margin-bottom: .8rem !important;
  font-weight: 800 !important;
}
.sj-section-title::after {
  width: 44px !important;
  height: 3px !important;
  margin-top: .75rem !important;
}
.sj-section-sub {
  font-size: 1.08rem !important;
  color: var(--sj-text-soft) !important;
  max-width: 640px !important;
}

/* ============================================================
   PLATINUM v10 — bring back subtle life on cards & hero
   - Brand mark: full spectrum (orange → amber → emerald)
   - Product preview: floating cursor animation
   - Hero mockup: match-badge pulse ring
   - Cards: light gradient backgrounds + crisp hover effects
============================================================ */

/* ---- 1. Brand mark — properly show all the colors ---- */
.sj-brand-mark {
  background: linear-gradient(135deg,
    #EA580C 0%,
    #F97316 25%,
    #FBBF24 50%,
    #84CC16 75%,
    #10B981 100%) !important;
  background-size: 100% 100% !important;
  background-position: 0 0 !important;
  animation: none !important;
}
.navbar-brand:hover .sj-brand-mark {
  background: linear-gradient(225deg,
    #EA580C 0%,
    #F97316 25%,
    #FBBF24 50%,
    #84CC16 75%,
    #10B981 100%) !important;
  transform: rotate(-6deg);
}

/* ---- 2. Bring back the floating cursor inside the product preview ---- */
.sj-product-window { position: relative !important; }
.sj-product-window::after {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  width: 22px !important;
  height: 22px !important;
  background:
    radial-gradient(circle at 30% 30%, #FFFFFF 0%, #F1F5F9 40%, #94A3B8 100%) !important;
  border: 1.5px solid var(--sj-ink) !important;
  border-radius: 50% 0 55% 50% !important;
  transform: rotate(-45deg) !important;
  top: 340px !important;
  left: 380px !important;
  pointer-events: none !important;
  opacity: 0 !important;
  animation: sj-cursor 9s cubic-bezier(.45,.05,.55,.95) infinite !important;
  box-shadow:
    0 4px 12px rgba(15, 23, 42, .35),
    0 1px 0 rgba(255,255,255,.4) inset !important;
  z-index: 5 !important;
  inset: auto !important;
  margin: 0 !important;
  padding: 0 !important;
}
@keyframes sj-cursor {
  0%   { opacity: 0; top: 340px; left: 380px; }
  8%   { opacity: 1; }
  30%  { top: 230px; left: 290px; transform: rotate(-45deg) scale(1); }
  38%  { transform: rotate(-45deg) scale(.78); }   /* click */
  46%  { transform: rotate(-45deg) scale(1); }
  72%  { top: 440px; left: 700px; transform: rotate(-45deg) scale(1); }
  80%  { transform: rotate(-45deg) scale(.78); }   /* click */
  88%  { transform: rotate(-45deg) scale(1); }
  95%  { opacity: 1; }
  100% { opacity: 0; }
}
@media (max-width: 991.98px) {
  .sj-product-window::after { display: none !important; }
}

/* ---- 3. Pulse ring around hero mockup match badges ---- */
.mc-match {
  position: relative;
  isolation: isolate;
}
.mc-match::after {
  display: block !important;
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--sj-emerald-400) !important;
  animation: sj-mc-pulse 2.6s ease-out infinite !important;
  pointer-events: none !important;
  z-index: -1 !important;
}
.sj-mockup-card.mc-2 .mc-match::after { animation-delay: .5s; }
.sj-mockup-card.mc-3 .mc-match::after { animation-delay: 1s; }
@keyframes sj-mc-pulse {
  0%   { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.5); }
}

/* ---- 4. Light-gradient card backgrounds (tasteful, not noisy) ---- */
/* Each card type gets ONE soft directional gradient, not multiple blobs */

.sj-job-card {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFFAF5 100%) !important;
  border-color: var(--sj-border-soft) !important;
}
.sj-job-card:hover {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFF4EA 100%) !important;
  border-color: var(--sj-orange-200) !important;
}

.sj-step:nth-child(1) {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFF7ED 100%) !important;
  border-color: var(--sj-orange-100) !important;
}
.sj-step:nth-child(2) {
  background: linear-gradient(160deg, #FFFFFF 0%, #FEFCE8 100%) !important;
  border-color: #FEF08A !important;
}
.sj-step:nth-child(3) {
  background: linear-gradient(160deg, #FFFFFF 0%, #ECFDF5 100%) !important;
  border-color: var(--sj-emerald-100) !important;
}

.sj-category-card {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFFBF7 100%) !important;
  border-color: var(--sj-border-soft) !important;
}
.sj-category-card:nth-child(2n) { background: linear-gradient(160deg, #FFFFFF 0%, #F0FDF4 100%) !important; }
.sj-category-card:nth-child(3n) { background: linear-gradient(160deg, #FFFFFF 0%, #FEFCE8 100%) !important; }
.sj-category-card:nth-child(4n) { background: linear-gradient(160deg, #FFFFFF 0%, #EFF6FF 100%) !important; }
.sj-category-card:hover {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFF4EA 100%) !important;
  border-color: var(--sj-orange-200) !important;
}

.sj-testimonial {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFFAF5 100%) !important;
  border-color: var(--sj-border-soft) !important;
}
.sj-testimonial:hover {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFF4EA 100%) !important;
  border-color: var(--sj-orange-200) !important;
}

.sj-plan:not(.sj-plan-featured) {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFFAF5 100%) !important;
}
.sj-plan:not(.sj-plan-featured):hover {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFF4EA 100%) !important;
}

.sj-stat-card { background: transparent !important; }

.sj-feature-card:not(.sj-feature-card-primary) {
  background: linear-gradient(160deg, #FFFFFF 0%, #ECFDF5 100%) !important;
  border-color: var(--sj-emerald-100) !important;
}

/* ---- Card hover: soft gradient inner glow + tighter lift ---- */
.sj-job-card,
.sj-step,
.sj-testimonial,
.sj-category-card,
.sj-plan:not(.sj-plan-featured) {
  transition:
    transform .25s cubic-bezier(.4,0,.2,1),
    box-shadow .25s cubic-bezier(.4,0,.2,1),
    background .3s ease,
    border-color .25s ease !important;
}
.sj-job-card:hover,
.sj-step:hover,
.sj-testimonial:hover,
.sj-category-card:hover,
.sj-plan:not(.sj-plan-featured):hover {
  transform: translateY(-4px) !important;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 8px 16px rgba(15,23,42,.04),
    0 16px 32px rgba(15,23,42,.06),
    0 24px 48px rgba(234,88,12,.07) !important;
}

/* ============================================================
   PLATINUM v11 — close the empty space
============================================================ */

/* Tighter hero bottom + tiny wave + tight press top */
.sj-hero { padding: 5rem 0 2rem !important; }
.sj-wave { height: 36px !important; margin-top: -1px; }
.sj-press { padding: 2.25rem 0 !important; }

/* Remove the hero+wave+press extra padding-top added earlier */
.sj-hero + .sj-wave + .sj-press { padding-top: 2.25rem !important; }
.sj-press + .sj-stats { padding-top: 2.5rem !important; }

/* Tighten stats top so it doesn't leave another gap */
.sj-stats { padding: 3rem 0 !important; }

/* Slightly smaller press names so the strip is more compact */
.sj-press-name { font-size: 1.3rem !important; }
.sj-press-name.bold { font-size: 1.15rem !important; }

/* Tighter inter-section spacing across the board */
.sj-section + .sj-section { padding-top: 3rem !important; }

/* Hero badge / pill margins tightened */
.sj-hero-trust { margin-top: 1.25rem !important; padding: .6rem 1rem !important; }
.sj-hero-tags { margin-top: 1rem !important; }

/* ============================================================
   PLATINUM v12 — aggressively close the hero→press void,
   add a visible orange→green ribbon, restore gradient ribbons
============================================================ */

/* Mockup column was 520px tall, leaving void below the left column.
   Shrink it so hero height tracks the left content. */
.sj-hero-mockup { height: 440px !important; }
.sj-mockup-card.mc-1 { top: 0    !important; }
.sj-mockup-card.mc-2 { top: 150px !important; }
.sj-mockup-card.mc-3 { top: 300px !important; }

/* Even tighter hero padding-bottom */
.sj-hero { padding: 5rem 0 1rem !important; }

/* Remove the curved wave (we'll use a ribbon instead) */
.sj-hero + .sj-wave { display: none !important; }

/* Restore the rainbow ribbon between sections — visible orange→green */
.sj-rainbow-strip {
  display: block !important;
  height: 4px !important;
  background: linear-gradient(90deg,
    #C2410C 0%,
    #EA580C 15%,
    #F97316 30%,
    #FBBF24 50%,
    #84CC16 70%,
    #10B981 88%,
    #047857 100%) !important;
  background-size: 200% 100% !important;
  animation: sj-shift 6s ease-in-out infinite !important;
  opacity: 1 !important;
  box-shadow:
    0 0 16px rgba(234, 88, 12, .3),
    0 0 16px rgba(16, 185, 129, .25) !important;
}

/* Press strip ultra-compact */
.sj-press { padding: 1.75rem 0 !important; }
.sj-press-label { margin-bottom: 1rem !important; }

/* Add gradient backdrop to the press strip so the orange/green is felt */
.sj-press {
  background:
    linear-gradient(180deg, rgba(255,247,237,.5) 0%, rgba(236,253,245,.4) 100%),
    #FFFFFF !important;
}

/* "AS FEATURED IN" label gets the gradient treatment */
.sj-press-label {
  background: linear-gradient(120deg, var(--sj-orange-700) 0%, var(--sj-emerald-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent !important;
}

/* Mobile: less mockup height needed there too */
@media (max-width: 991.98px) {
  .sj-hero-mockup { height: 0 !important; }
}

/* ============================================================
   PLATINUM v13 — fix invisible text on featured pricing card
============================================================ */

/* The "Employer Growth" featured plan sits on a dark orange gradient.
   Its description, price period, and list items were rendering as
   slate-gray (var(--sj-text-muted)) which is invisible on that background. */
.sj-plan-featured h3,
.sj-plan-featured .sj-plan-tag,
.sj-plan-featured .sj-plan-price { color: #fff !important; }

.sj-plan-featured .desc,
.sj-plan-featured p,
.sj-plan-featured ul li {
  color: rgba(255, 255, 255, .92) !important;
}

.sj-plan-featured .sj-plan-price .period {
  color: rgba(255, 255, 255, .78) !important;
}

.sj-plan-featured ul li::before {
  color: #FFFFFF !important;
}

.sj-plan-featured .sj-plan-tag {
  background: #FFFFFF !important;
  color: var(--sj-orange-800) !important;
}

/* Make sure the white CTA button on the featured plan stays readable */
.sj-plan-featured .btn-primary {
  background: #FFFFFF !important;
  color: var(--sj-orange-700) !important;
  border-color: #FFFFFF !important;
  background-image: none !important;
}
.sj-plan-featured .btn-primary:hover {
  background: rgba(255,255,255,.94) !important;
  color: var(--sj-orange-800) !important;
}

/* ============================================================
   ADMIN — premium dashboard styling
============================================================ */

.adm-welcome {
  background:
    radial-gradient(50% 100% at 0% 50%, rgba(234, 88, 12, .10) 0%, transparent 60%),
    radial-gradient(50% 100% at 100% 50%, rgba(16, 185, 129, .10) 0%, transparent 60%),
    #FFFFFF;
  border-radius: 16px;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 4px 12px rgba(15,23,42,.04),
    0 16px 32px rgba(15,23,42,.06);
}
.adm-welcome .card-body { padding: .9rem 1.25rem; }
.adm-welcome h1 { font-size: 1.1rem !important; margin-bottom: 0 !important; line-height: 1.25; }
.adm-welcome .text-muted.small { font-size: .75rem; }
.adm-welcome p.small { display: none; }

.adm-stat {
  position: relative;
  padding: 1.25rem 1.25rem 1.1rem;
  border-radius: 14px;
  background: #FFFFFF;
  border: 1px solid var(--sj-border-soft);
  box-shadow: var(--sj-shadow-sm);
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
  overflow: hidden;
}
.adm-stat:hover { transform: translateY(-3px); box-shadow: var(--sj-shadow-md); }
.adm-stat::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.adm-stat-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  margin-bottom: .85rem;
  color: #fff;
  box-shadow: 0 4px 8px rgba(15,23,42,.10);
}
.adm-stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--sj-text-muted); font-weight: 700; margin-bottom: .25rem; }
.adm-stat-value { font-size: 1.85rem; font-weight: 800; color: var(--sj-ink); letter-spacing: -0.03em; line-height: 1; margin-bottom: .35rem; }
.adm-stat-delta { font-size: .76rem; color: var(--sj-emerald-700); font-weight: 600; }
.adm-stat-delta i { font-size: .9rem; vertical-align: -2px; }

/* All stat icons use the standard brand gradient (warm orange). */
.adm-stat-orange  .adm-stat-icon,
.adm-stat-amber   .adm-stat-icon,
.adm-stat-emerald .adm-stat-icon,
.adm-stat-lime    .adm-stat-icon,
.adm-stat-slate   .adm-stat-icon {
  background: var(--sj-gradient-warm);
  box-shadow: var(--sj-shadow-primary);
}
.adm-stat-orange::after,
.adm-stat-amber::after,
.adm-stat-emerald::after,
.adm-stat-lime::after,
.adm-stat-slate::after {
  background: var(--sj-gradient-warm);
}

.adm-panel {
  border-radius: 16px;
  background: #FFFFFF;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 1px 2px rgba(15,23,42,.04),
    0 8px 16px rgba(15,23,42,.04);
}
.adm-panel .card-body { padding: 1.5rem; }

/* Application pipeline */
.adm-pipeline-row {
  display: grid;
  grid-template-columns: 180px 1fr 60px;
  align-items: center;
  gap: 1rem;
  padding: .55rem 0;
}
.adm-pipeline-label { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--sj-text); font-weight: 500; }
.adm-pipeline-bar  { height: 8px; background: var(--sj-bg-canvas); border-radius: 999px; overflow: hidden; }
.adm-pipeline-fill {
  display: block; height: 100%;
  background: linear-gradient(90deg, #EA580C, #F97316, #FBBF24, #84CC16, #10B981);
  background-size: 200% 200%;
  border-radius: 999px;
  animation: sj-shift 8s ease-in-out infinite;
}
.adm-pipeline-count { text-align: right; font-size: .9rem; font-weight: 700; color: var(--sj-ink); }
.adm-stage-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.adm-stage-applied             { background: #93C5FD; }
.adm-stage-viewed              { background: #818CF8; }
.adm-stage-shortlisted         { background: #FCD34D; }
.adm-stage-interview_scheduled { background: #FDBA74; }
.adm-stage-selected            { background: #6EE7B7; }
.adm-stage-offered             { background: #34D399; }
.adm-stage-joined              { background: #10B981; }

/* Top company list */
.adm-top-row {
  display: flex; align-items: center; gap: .75rem;
  padding: .65rem 0;
  border-bottom: 1px dashed var(--sj-border-soft);
}
.adm-top-row:last-child { border-bottom: none; }
.adm-top-rank {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--sj-bg-canvas);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .7rem; font-weight: 800;
  color: var(--sj-text-soft);
}
.adm-top-row:nth-child(1) .adm-top-rank { background: linear-gradient(135deg, #FBBF24, #F59E0B); color: #fff; box-shadow: 0 2px 4px rgba(245,158,11,.3); }
.adm-top-row:nth-child(2) .adm-top-rank { background: linear-gradient(135deg, #CBD5E1, #94A3B8); color: #fff; }
.adm-top-row:nth-child(3) .adm-top-rank { background: linear-gradient(135deg, #FB923C, #F97316); color: #fff; box-shadow: 0 2px 4px rgba(249,115,22,.3); }
.adm-top-logo {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #FFF7ED, #ECFDF5);
  border: 1px solid var(--sj-border-soft);
  color: var(--sj-orange-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .82rem;
}

/* Feed rows */
.adm-feed-row {
  display: flex; align-items: center; gap: .85rem;
  padding: .7rem 0;
  border-bottom: 1px dashed var(--sj-border-soft);
}
.adm-feed-row:last-child { border-bottom: none; }
.adm-feed-row .min-w-0 { min-width: 0; }
.adm-feed-row .text-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.adm-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: .78rem;
  background: linear-gradient(135deg, #EA580C, #F97316);
  box-shadow: 0 2px 4px rgba(15,23,42,.08);
  flex-shrink: 0;
}
.adm-avatar-candidate      { background: linear-gradient(135deg, #EA580C, #F97316); }
.adm-avatar-employer_owner { background: linear-gradient(135deg, #059669, #10B981); }
.adm-avatar-hr_manager     { background: linear-gradient(135deg, #047857, #34D399); }
.adm-avatar-recruiter      { background: linear-gradient(135deg, #7C3AED, #A855F7); }
.adm-avatar-team_member    { background: linear-gradient(135deg, #2563EB, #60A5FA); }
.adm-avatar-admin          { background: linear-gradient(135deg, #DC2626, #F87171); }
.adm-avatar-super_admin    { background: linear-gradient(135deg, #831843, #EC4899); }
.adm-avatar-user           { background: linear-gradient(135deg, #475569, #64748B); }

.adm-co-logo {
  width: 38px; height: 38px;
  border-radius: 8px;
  background: linear-gradient(135deg, #FFF7ED, #ECFDF5);
  border: 1px solid var(--sj-border-soft);
  color: var(--sj-orange-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: .9rem;
  flex-shrink: 0;
}

/* Role pills */
.adm-role-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: capitalize;
  border: 1px solid;
  margin-right: 4px;
  margin-bottom: 2px;
}
.adm-role-candidate      { background: #FFF7ED; color: #9A3412; border-color: #FED7AA; }
.adm-role-employer_owner { background: #ECFDF5; color: #065F46; border-color: #A7F3D0; }
.adm-role-hr_manager     { background: #F0FDF4; color: #14532D; border-color: #86EFAC; }
.adm-role-recruiter      { background: #F5F3FF; color: #5B21B6; border-color: #C4B5FD; }
.adm-role-team_member    { background: #EFF6FF; color: #1E40AF; border-color: #93C5FD; }
.adm-role-admin          { background: #FEF2F2; color: #991B1B; border-color: #FCA5A5; }
.adm-role-super_admin    { background: #FDF2F8; color: #831843; border-color: #F9A8D4; }
.adm-role-user           { background: #F1F5F9; color: #475569; border-color: #CBD5E1; }

/* Status badge variants */
.adm-status {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: capitalize;
}
.adm-status-success   { background: #D1FAE5; color: #065F46; }
.adm-status-warning   { background: #FEF3C7; color: #92400E; }
.adm-status-danger    { background: #FEE2E2; color: #991B1B; }
.adm-status-secondary { background: #F1F5F9; color: #475569; }

/* Search input */
.adm-search { position: relative; width: 360px; max-width: 100%; }
.adm-search > i {
  position: absolute;
  left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--sj-text-muted);
}
.adm-search .form-control {
  padding-left: 38px !important;
  padding-right: 38px !important;
  border-radius: 10px;
  font-size: .92rem;
  background: #fff;
  border: 1px solid var(--sj-border);
}
.adm-search .form-control:focus {
  border-color: var(--sj-orange-400);
  box-shadow: 0 0 0 4px rgba(234, 88, 12, .1);
}
.adm-search-clear {
  position: absolute;
  right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--sj-text-muted);
  text-decoration: none;
  font-size: .85rem;
}
.adm-search-clear:hover { color: var(--sj-ink); }

/* Filter chips */
.adm-chip-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.adm-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: .35rem .85rem;
  background: #FFFFFF;
  border: 1px solid var(--sj-border);
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--sj-text);
  text-decoration: none;
  transition: all .15s;
}
.adm-chip:hover { background: var(--sj-bg-alt); color: var(--sj-ink); }
.adm-chip.is-active {
  background: var(--sj-ink);
  border-color: var(--sj-ink);
  color: #FFFFFF;
}
.adm-chip-count {
  background: rgba(15,23,42,.06);
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 700;
}
.adm-chip.is-active .adm-chip-count { background: rgba(255,255,255,.18); }

/* Tables */
.adm-table thead th {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 700;
  color: var(--sj-text-muted);
  background: var(--sj-bg-soft);
  border-bottom: 1px solid var(--sj-border-soft);
  padding: .85rem 1rem;
}
.adm-table tbody td {
  padding: .85rem 1rem;
  border-color: var(--sj-border-soft);
  vertical-align: middle;
}
.adm-table tbody tr { transition: background .15s; }
.adm-table tbody tr:hover { background: var(--sj-bg-warm); }

@media (max-width: 991.98px) {
  .adm-pipeline-row { grid-template-columns: 130px 1fr 50px; }
  .adm-welcome .card-body { padding: 1.25rem; }
}

/* ============================================================
   ADMIN SHELL — collapsible sidebar + top bar + content
============================================================ */
:root {
  --adm-sidebar-w:          260px;
  --adm-sidebar-collapsed:  72px;
  --adm-topbar-h:           62px;
  --adm-sidebar-bg:         #FFFBF7;   /* warm cream */
  --adm-sidebar-bg-2:       #FFF7ED;   /* soft orange tint */
  --adm-sidebar-text:       #475569;   /* slate body text */
  --adm-sidebar-text-hi:    #0B1220;   /* near-black for active/hover label */
  --adm-sidebar-active-bg:  #FFF1E0;   /* soft orange tint for active row */
  --adm-sidebar-border:     #F1E6D6;   /* warm border */
}

body.adm-shell {
  background: var(--sj-bg-canvas);
  padding-top: 0;
}

.adm-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--adm-sidebar-w);
  background:
    radial-gradient(80% 50% at 0% 0%, rgba(234, 88, 12, .10) 0%, transparent 55%),
    radial-gradient(70% 50% at 100% 100%, rgba(16, 185, 129, .10) 0%, transparent 55%),
    linear-gradient(180deg, var(--adm-sidebar-bg) 0%, var(--adm-sidebar-bg-2) 100%);
  color: var(--adm-sidebar-text);
  border-right: 1px solid var(--adm-sidebar-border);
  overflow-y: auto;
  z-index: 20;
  transition: width .25s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
}
.adm-sidebar::-webkit-scrollbar { width: 6px; }
.adm-sidebar::-webkit-scrollbar-thumb { background: rgba(15,23,42,.12); border-radius: 3px; }

.adm-sidebar-inner { display: flex; flex-direction: column; min-height: 100%; padding: .65rem .75rem 1rem; }

/* Top row: toggle + brand */
.adm-sidebar-top {
  display: flex; align-items: center; gap: 10px;
  padding: .15rem .15rem 1rem;
  border-bottom: 1px solid var(--adm-sidebar-border);
  margin-bottom: .75rem;
}
.adm-rail-toggle {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--sj-text-muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s, color .15s, border-color .15s;
}
.adm-rail-toggle:hover {
  background: var(--sj-orange-50);
  color: var(--sj-orange-700);
  border-color: var(--sj-orange-100);
}
.adm-brand-link {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none;
  min-width: 0;
  flex: 1;
}
.adm-brand-mark {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #EA580C, #F97316 30%, #FBBF24 55%, #84CC16 80%, #10B981);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  box-shadow: 0 4px 12px rgba(234, 88, 12, .35), 0 1px 0 rgba(255,255,255,.4) inset;
  flex-shrink: 0;
}
.adm-brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.adm-brand-title { color: var(--sj-ink); font-weight: 800; font-size: 1rem; letter-spacing: -0.02em; }
.adm-brand-sub   { color: var(--sj-text-muted); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; }

/* Nav */
.adm-nav { flex-grow: 1; }
.adm-nav-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sj-text-faint);
  padding: .85rem .85rem .4rem;
  margin-top: .25rem;
  white-space: nowrap;
}
.adm-nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: .55rem .85rem;
  margin-bottom: 2px;
  border-radius: 9px;
  color: var(--adm-sidebar-text);
  font-size: .9rem;
  font-weight: 500;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
  position: relative;
  white-space: nowrap;
}
.adm-nav-link i { font-size: 1.05rem; min-width: 22px; text-align: center; flex-shrink: 0; }
.adm-nav-link:hover {
  background: var(--adm-sidebar-active-bg);
  color: var(--adm-sidebar-text-hi);
}
.adm-nav-link.is-active {
  background: linear-gradient(135deg, rgba(234, 88, 12, .14) 0%, rgba(16, 185, 129, .10) 100%);
  color: var(--adm-sidebar-text-hi);
  box-shadow: inset 0 0 0 1px rgba(234, 88, 12, .15), inset 3px 0 0 var(--sj-orange-500);
  font-weight: 600;
}
.adm-nav-badge {
  margin-left: auto;
  background: var(--sj-orange-600);
  color: #fff;
  padding: 1px 7px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
}

.adm-sidebar-footer {
  margin-top: auto;
  padding-top: .75rem;
  border-top: 1px solid var(--adm-sidebar-border);
}

/* ---- Bottom-left profile widget (Claude-style: small round avatar only) ---- */
.adm-profile { position: relative; }
.adm-profile-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: transform .12s, box-shadow .15s;
}
.adm-profile-trigger:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 23, 42, .12);
}
.adm-profile-trigger[aria-expanded="true"] {
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .22);
}
.adm-profile-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--sj-ink);
  color: #fff;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .03em;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.adm-profile-avatar.lg {
  width: 40px; height: 40px;
  font-size: .85rem;
  background: var(--sj-gradient-warm);
  box-shadow: var(--sj-shadow-primary);
}
.adm-profile-meta {
  display: flex; flex-direction: column;
  min-width: 0;
  flex: 1;
  line-height: 1.15;
}
.adm-profile-name {
  font-weight: 600;
  font-size: .85rem;
  color: var(--sj-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adm-profile-role {
  font-size: .7rem;
  color: var(--sj-text-muted);
  white-space: nowrap;
}
.adm-profile-caret {
  color: var(--sj-text-muted);
  font-size: 1rem;
  flex-shrink: 0;
}

/* Popup menu — `position: fixed` so it escapes the sidebar's
   overflow-y clip (the previous absolute positioning was being
   hidden by the sidebar's scroll container in collapsed mode). */
.adm-profile-menu {
  position: fixed;
  bottom: 4.5rem;
  left: .75rem;
  width: calc(var(--adm-sidebar-w) - 1.5rem);
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--sj-border);
  border-radius: 14px;
  box-shadow: var(--sj-shadow-lg);
  padding: .5rem;
  z-index: 40;
  display: none;
}
.adm-profile.is-open .adm-profile-menu { display: block; }

.adm-profile-menu-head {
  display: flex; align-items: center; gap: 10px;
  padding: .65rem .75rem;
  margin: -.25rem -.25rem .35rem;
}
.adm-profile-menu-meta { min-width: 0; }
.adm-profile-menu-name { font-weight: 700; color: var(--sj-ink); font-size: .9rem; line-height: 1.2; }
.adm-profile-menu-email {
  font-size: .78rem;
  color: var(--sj-text-muted);
  margin-top: 2px;
  word-break: break-all;
}
.adm-profile-menu-sec {
  padding: .25rem 0;
  border-top: 1px solid var(--sj-border-soft);
}
.adm-profile-menu-sec:first-of-type { border-top: 0; }
.adm-profile-menu-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: .5rem .65rem;
  border: 0; background: transparent;
  border-radius: 8px;
  color: var(--sj-text);
  font-size: .88rem;
  text-decoration: none;
  cursor: pointer;
  text-align: left;
}
.adm-profile-menu-item:hover {
  background: var(--sj-bg-alt);
  color: var(--sj-ink);
}
.adm-profile-menu-item i { color: var(--sj-text-muted); font-size: 1rem; width: 18px; text-align: center; }
.adm-profile-menu-item:hover i { color: var(--sj-orange-600); }
.adm-profile-menu-item.is-danger { color: #B91C1C; }
.adm-profile-menu-item.is-danger:hover { background: #FEF2F2; color: #7F1D1D; }
.adm-profile-menu-item.is-danger i { color: #B91C1C; }

/* Collapsed sidebar — profile becomes icon-only avatar; menu flies out to the right */
body[data-sidebar-collapsed="true"] .adm-profile-trigger {
  justify-content: center;
  padding: .35rem;
}
body[data-sidebar-collapsed="true"] .adm-profile-meta,
body[data-sidebar-collapsed="true"] .adm-profile-caret { display: none; }
body[data-sidebar-collapsed="true"] .adm-profile-menu {
  bottom: .75rem;
  left: calc(var(--adm-sidebar-collapsed) + 8px);
  width: 260px;
}

/* Collapsed state */
body[data-sidebar-collapsed="true"] .adm-sidebar {
  width: var(--adm-sidebar-collapsed);
}
body[data-sidebar-collapsed="true"] .adm-brand-text,
body[data-sidebar-collapsed="true"] .adm-nav-text,
body[data-sidebar-collapsed="true"] .adm-nav-label,
body[data-sidebar-collapsed="true"] .adm-nav-badge {
  display: none;
}
body[data-sidebar-collapsed="true"] .adm-nav-link {
  justify-content: center;
  padding: .65rem;
}
body[data-sidebar-collapsed="true"] .adm-nav-link i { min-width: auto; }
body[data-sidebar-collapsed="true"] .adm-brand-link { display: none; }
body[data-sidebar-collapsed="true"] .adm-sidebar-top {
  flex-direction: column;
  padding: .15rem 0 .85rem;
  gap: 0;
}
body[data-sidebar-collapsed="true"] .adm-rail-toggle {
  width: 38px; height: 38px;
}

/* Main area */
.adm-main {
  margin-left: var(--adm-sidebar-w);
  min-height: 100vh;
  transition: margin-left .25s cubic-bezier(.4,0,.2,1);
}
body[data-sidebar-collapsed="true"] .adm-main { margin-left: var(--adm-sidebar-collapsed); }

/* Top bar */
.adm-topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 1rem;
  height: var(--adm-topbar-h);
  padding: 0 1.5rem;
  background: rgba(255, 255, 255, .9);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--sj-border-soft);
}
.adm-toggle {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: var(--sj-bg-soft);
  border: 1px solid var(--sj-border-soft);
  color: var(--sj-text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.15rem;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.adm-toggle:hover { background: #fff; border-color: var(--sj-border); }

.adm-search-top {
  position: relative;
  flex-grow: 1;
  max-width: 480px;
}
.adm-search-top i {
  position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  color: var(--sj-text-muted);
}
.adm-search-top input {
  width: 100%;
  padding: .55rem 60px .55rem 40px;
  background: var(--sj-bg-soft);
  border: 1px solid var(--sj-border-soft);
  border-radius: 10px;
  font-size: .9rem;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.adm-search-top input:focus {
  border-color: var(--sj-orange-300);
  box-shadow: 0 0 0 4px rgba(234, 88, 12, .08);
  background: #fff;
}
.adm-search-top kbd {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  background: #fff;
  border: 1px solid var(--sj-border);
  color: var(--sj-text-muted);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: .72rem;
  font-family: ui-monospace, monospace;
}

.adm-topbar-actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.adm-icon-btn {
  position: relative;
  width: 38px; height: 38px;
  border-radius: 9px;
  background: transparent;
  border: 1px solid transparent;
  color: var(--sj-text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s;
}
.adm-icon-btn:hover { background: var(--sj-bg-soft); border-color: var(--sj-border-soft); color: var(--sj-ink); }
.adm-icon-btn .adm-dot {
  position: absolute; top: 8px; right: 9px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--sj-orange-500);
  border: 2px solid #fff;
}

.adm-user-pill {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px 6px 6px;
  border-radius: 999px;
  background: var(--sj-bg-soft);
  border: 1px solid var(--sj-border-soft);
}
.adm-user-pill .adm-avatar { width: 32px; height: 32px; font-size: .72rem; }

/* Content */
.adm-content { padding: 1.75rem 2rem 3rem; }

/* Mobile */
@media (max-width: 991.98px) {
  .adm-sidebar { transform: translateX(-100%); transition: transform .25s ease, width .25s ease; }
  body[data-sidebar-open="true"] .adm-sidebar { transform: translateX(0); }
  .adm-main { margin-left: 0 !important; }
  .adm-search-top { display: none; }
  .adm-content { padding: 1.25rem 1rem 2rem; }
  body[data-sidebar-collapsed="true"] .adm-brand-text,
  body[data-sidebar-collapsed="true"] .adm-nav-text,
  body[data-sidebar-collapsed="true"] .adm-nav-label { display: revert; }
}

/* Admin page header — used inside every admin page */
.adm-page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.adm-page-head h1 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 1.65rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: .25rem;
  color: var(--sj-ink);
}
.adm-page-head .adm-page-sub { color: var(--sj-text-muted); font-size: .92rem; margin: 0; }

/* RBAC matrix table */
.adm-matrix {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .85rem;
}
.adm-matrix thead th {
  position: sticky; top: 0; background: #fff;
  padding: 1rem .65rem;
  text-align: center;
  font-weight: 700;
  font-size: .75rem;
  text-transform: capitalize;
  border-bottom: 1px solid var(--sj-border);
  white-space: nowrap;
}
.adm-matrix thead th:first-child { text-align: left; padding-left: 1.25rem; }
.adm-matrix tbody td {
  padding: .65rem;
  text-align: center;
  border-bottom: 1px solid var(--sj-border-soft);
  vertical-align: middle;
}
.adm-matrix tbody td:first-child {
  text-align: left;
  padding-left: 1.25rem;
  font-weight: 500;
  color: var(--sj-text);
}
.adm-matrix .perm-check {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--sj-emerald-50);
  color: var(--sj-emerald-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem;
  border: 1px solid var(--sj-emerald-200);
}
.adm-matrix .perm-x {
  width: 22px; height: 22px;
  border-radius: 6px;
  background: var(--sj-bg-soft);
  color: var(--sj-text-faint);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .85rem;
  border: 1px solid var(--sj-border-soft);
}

/* Config / LKP list */
.adm-lkp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.adm-lkp-card {
  background: #fff;
  border: 1px solid var(--sj-border-soft);
  border-radius: 14px;
  padding: 1.25rem;
  text-decoration: none;
  color: var(--sj-ink);
  transition: transform .2s, box-shadow .2s, border-color .2s;
  display: block;
}
.adm-lkp-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--sj-shadow-md);
  border-color: var(--sj-orange-200);
  color: var(--sj-ink);
}
.adm-lkp-card-icon {
  width: 42px; height: 42px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--sj-orange-50), var(--sj-emerald-50));
  border: 1px solid var(--sj-orange-100);
  color: var(--sj-orange-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  margin-bottom: .85rem;
}
.adm-lkp-card h3 { font-size: 1rem; margin-bottom: .25rem; }
.adm-lkp-card p { font-size: .85rem; color: var(--sj-text-muted); margin: 0; }
.adm-lkp-card-count {
  display: inline-block;
  background: var(--sj-orange-50);
  color: var(--sj-orange-800);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .75rem;
  font-weight: 700;
  margin-top: .65rem;
}

/* ============================================================
   ADMIN v2 — collapsible nav groups + richer page surfaces
============================================================ */

/* ---- Collapsible sidebar groups (v3: group icons + flyout in collapsed mode) ---- */
.adm-nav-group { margin-bottom: .35rem; position: relative; }

.adm-nav-group-header {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  padding: .55rem .85rem;
  background: transparent;
  border: 0;
  cursor: pointer;
  user-select: none;
  color: var(--sj-text-muted);
  border-radius: 9px;
  font-weight: 600;
  transition: color .15s ease, background .15s ease;
}
.adm-nav-group-header:hover {
  color: var(--sj-ink);
  background: rgba(234, 88, 12, .06);
}
.adm-nav-group-icon {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: var(--sj-orange-50);
  color: var(--sj-orange-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
  transition: background .15s, color .15s;
}
.adm-nav-group-header:hover .adm-nav-group-icon {
  background: var(--sj-orange-100);
  color: var(--sj-orange-800);
}
.adm-nav-group:not(.is-collapsed) .adm-nav-group-icon {
  background: var(--sj-emerald-50);
  color: var(--sj-emerald-700);
}
.adm-nav-group-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  flex-grow: 1;
  text-align: left;
  color: var(--sj-text-soft);
}
.adm-nav-group-chevron {
  font-size: .75rem;
  transition: transform .25s ease;
  opacity: .75;
  color: var(--sj-text-muted);
}
.adm-nav-group.is-collapsed .adm-nav-group-chevron { transform: rotate(-90deg); }

/* Sub-items: text only, indented (subheading no icon — per request) */
.adm-nav-link {
  padding-left: 2.85rem;
}
.adm-nav-link > i {
  display: none;
}
/* Flat group (Dashboard) — keep its icon since it has no group header */
.adm-nav-group.is-flat .adm-nav-link { padding-left: .85rem; }
.adm-nav-group.is-flat .adm-nav-link > i { display: inline-flex; }

.adm-nav-group-items {
  overflow: hidden;
  transition: max-height .3s ease;
  max-height: 1000px;
  padding-top: 2px;
}
.adm-nav-group.is-collapsed .adm-nav-group-items { max-height: 0; }
.adm-nav-flyout-label { display: none; }

/* ---- COLLAPSED SIDEBAR — icon rail with hover flyouts ---- */
body[data-sidebar-collapsed="true"] .adm-nav-group-header {
  display: flex;
  justify-content: center;
  padding: .65rem;
  gap: 0;
  border-radius: 10px;
  margin: 0 .15rem;
}
body[data-sidebar-collapsed="true"] .adm-nav-group-icon {
  width: auto;
  font-size: 1.2rem;
}
body[data-sidebar-collapsed="true"] .adm-nav-group-label,
body[data-sidebar-collapsed="true"] .adm-nav-group-chevron { display: none; }
body[data-sidebar-collapsed="true"] .adm-nav-group.is-flat .adm-nav-group-header { display: none; }

body[data-sidebar-collapsed="true"] .adm-nav-group-items {
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  background: #fff;
  border: 1px solid var(--sj-border);
  border-radius: 12px;
  box-shadow: var(--sj-shadow-md);
  padding: .5rem;
  min-width: 220px;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .15s ease;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .35), 0 1px 0 rgba(255,255,255,.06) inset;
  z-index: 100;
}
body[data-sidebar-collapsed="true"] .adm-nav-group:hover .adm-nav-group-items {
  max-height: none;
  opacity: 1;
  pointer-events: auto;
}
body[data-sidebar-collapsed="true"] .adm-nav-flyout-label {
  display: block;
  padding: .35rem .65rem .55rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sj-text-muted);
  border-bottom: 1px solid var(--sj-border-soft);
  margin-bottom: .35rem;
}
body[data-sidebar-collapsed="true"] .adm-nav-group .adm-nav-link {
  padding-left: .75rem;
  white-space: nowrap;
}
body[data-sidebar-collapsed="true"] .adm-nav-group .adm-nav-link > i { display: none; }

/* Flat group (Dashboard) — icon-only, no flyout */
body[data-sidebar-collapsed="true"] .adm-nav-group.is-flat .adm-nav-group-items {
  position: static;
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  min-width: 0;
  max-height: none;
  opacity: 1;
  pointer-events: auto;
}
body[data-sidebar-collapsed="true"] .adm-nav-group.is-flat .adm-nav-link {
  justify-content: center;
  padding: .65rem;
}
body[data-sidebar-collapsed="true"] .adm-nav-group.is-flat .adm-nav-link > i {
  display: inline-flex;
  font-size: 1.2rem;
}
body[data-sidebar-collapsed="true"] .adm-nav-group.is-flat .adm-nav-text { display: none; }

body[data-sidebar-collapsed="true"] .adm-nav-link.is-active {
  background: linear-gradient(135deg, rgba(234, 88, 12, .25) 0%, rgba(16, 185, 129, .15) 100%);
}

/* ---- Rich page hero header ---- */
.adm-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(60% 100% at 0% 50%, rgba(234, 88, 12, .10) 0%, transparent 60%),
    radial-gradient(60% 100% at 100% 50%, rgba(16, 185, 129, .10) 0%, transparent 60%),
    #FFFFFF;
  border: 1px solid var(--sj-border-soft);
  border-radius: 14px;
  padding: .85rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 4px 12px rgba(15,23,42,.04),
    0 16px 32px rgba(15,23,42,.05);
}
.adm-hero-row {
  display: flex; align-items: center; gap: .85rem;
  flex-wrap: wrap;
}
.adm-hero-breadcrumb { padding: 0 0 4px; }
.adm-hero-meta { min-width: 0; flex: 1; }
.adm-hero-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--sj-gradient-warm);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--sj-shadow-primary);
  flex-shrink: 0;
  flex-shrink: 0;
}
.adm-hero-meta { flex-grow: 1; min-width: 0; }
.adm-hero-title {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 0;
  color: var(--sj-ink);
  line-height: 1.25;
}
.adm-hero-sub {
  color: var(--sj-text-muted);
  font-size: .8rem;
  margin: 2px 0 0;
}
.adm-hero-breadcrumb {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .68rem; font-weight: 700;
  color: var(--sj-text-muted);
  margin-bottom: 2px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.adm-hero-breadcrumb a { color: var(--sj-text-muted); text-decoration: none; }
.adm-hero-breadcrumb a:hover { color: var(--sj-orange-700); }
.adm-hero-breadcrumb .sep { opacity: .5; }
.adm-hero-actions { margin-left: auto; display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---- Section card (icon-led header + body) ---- */
.adm-section {
  background: #FFFFFF;
  border: 1px solid var(--sj-border-soft);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 2px 4px rgba(15,23,42,.03),
    0 8px 16px rgba(15,23,42,.04);
  margin-bottom: 1.5rem;
}
.adm-section-head {
  display: flex; align-items: center; gap: 14px;
  padding: 1.1rem 1.5rem;
  background: linear-gradient(180deg, rgba(255, 247, 237, .35) 0%, rgba(255,255,255,1) 100%);
  border-bottom: 1px solid var(--sj-border-soft);
}
.adm-section-icon {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--sj-orange-50), var(--sj-emerald-50));
  border: 1px solid var(--sj-orange-100);
  color: var(--sj-orange-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
}
.adm-section-head h2 {
  font-size: 1rem; font-weight: 700; margin-bottom: 0; color: var(--sj-ink);
}
.adm-section-head .sub {
  color: var(--sj-text-muted); font-size: .82rem; margin: 0;
}
.adm-section-body { padding: 1.5rem; }
.adm-section-foot {
  display: flex; justify-content: flex-end; gap: .5rem;
  padding: 1rem 1.5rem;
  background: var(--sj-bg-soft);
  border-top: 1px solid var(--sj-border-soft);
}

/* ---- Setting field card (used in Home / General settings) ---- */
.adm-setting {
  background: #fff;
  border: 1px solid var(--sj-border-soft);
  border-radius: 14px;
  padding: 1.25rem;
  height: 100%;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
.adm-setting:hover {
  border-color: var(--sj-orange-200);
  box-shadow: 0 8px 16px rgba(234,88,12,.08);
  transform: translateY(-1px);
}
.adm-setting-head {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 1rem;
}
.adm-setting-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--sj-orange-50), var(--sj-emerald-50));
  color: var(--sj-orange-700);
  border: 1px solid var(--sj-orange-100);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .95rem;
  flex-shrink: 0;
}
.adm-setting-meta { flex-grow: 1; min-width: 0; }
.adm-setting-label { font-weight: 700; color: var(--sj-ink); font-size: .92rem; }
.adm-setting-desc  { color: var(--sj-text-muted); font-size: .8rem; line-height: 1.45; margin-top: 2px; }

.adm-setting-input .form-control,
.adm-setting-input .form-select {
  border-radius: 9px;
  padding: .5rem .8rem;
  background: var(--sj-bg-soft);
  border-color: var(--sj-border-soft);
  font-weight: 600;
  color: var(--sj-ink);
}
.adm-setting-input .form-control:focus {
  background: #fff;
  border-color: var(--sj-orange-300);
  box-shadow: 0 0 0 4px rgba(234,88,12,.08);
}

.adm-setting-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: .55rem .85rem;
  background: var(--sj-bg-soft);
  border: 1px solid var(--sj-border-soft);
  border-radius: 9px;
  font-size: .85rem;
  color: var(--sj-text-soft);
}
.adm-setting-toggle .form-check-input { margin: 0; cursor: pointer; }
.adm-setting-toggle .form-check-input:checked {
  background-color: var(--sj-emerald-500);
  border-color: var(--sj-emerald-500);
}

/* ---- Sticky save bar for settings pages ---- */
.adm-sticky-save {
  position: sticky;
  bottom: 0;
  background: rgba(255,255,255,.95);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  padding: 1rem 1.5rem;
  margin-top: 1.5rem;
  border: 1px solid var(--sj-border-soft);
  border-radius: 14px;
  box-shadow: 0 -4px 12px rgba(15,23,42,.04);
  display: flex; justify-content: space-between; align-items: center;
  gap: 1rem;
  z-index: 5;
}
.adm-sticky-save .help { color: var(--sj-text-muted); font-size: .85rem; }





/* ============================================================
   NOTIFICATIONS — admin inbox/sent + compose + bell dropdown
============================================================ */
.notif-list { display: flex; flex-direction: column; gap: 12px; }
.notif-card {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--sj-border);
  border-radius: 14px;
  padding: 16px 18px;
  transition: box-shadow .15s, border-color .15s;
}
.notif-card:hover { box-shadow: var(--sj-shadow-sm); border-color: var(--sj-orange-100); }
.notif-card.is-unread { border-left: 4px solid var(--sj-orange-500); background: linear-gradient(90deg, var(--sj-orange-50), #fff 30%); }
.notif-card-side { position: relative; }
.notif-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--sj-gradient-warm);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.notif-dot {
  position: absolute; top: 0; right: 6px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--sj-orange-600);
  box-shadow: 0 0 0 2px #fff;
}
.notif-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.notif-from { font-weight: 700; color: var(--sj-ink); }
.notif-from-email { color: var(--sj-text-muted); font-size: .8rem; margin-left: 4px; }
.notif-time { color: var(--sj-text-muted); font-size: .8rem; white-space: nowrap; }
.notif-title { font-size: 1rem; font-weight: 700; color: var(--sj-ink); margin: 6px 0 4px; }
.notif-body { color: var(--sj-text); font-size: .92rem; line-height: 1.55; }
.notif-meta { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.notif-chip {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--sj-bg-alt);
  color: var(--sj-text);
  border: 1px solid var(--sj-border-soft);
  border-radius: 999px;
  font-size: .75rem;
  padding: 3px 10px;
  text-decoration: none;
}
.notif-chip.is-link { color: var(--sj-orange-700); border-color: var(--sj-orange-100); background: var(--sj-orange-50); }
.notif-chip.is-link:hover { background: var(--sj-orange-100); }
.notif-actions { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.notif-read-stamp { color: var(--sj-text-muted); font-size: .8rem; display: inline-flex; align-items: center; gap: 4px; padding: 5px 8px; }
.notif-recipients { margin-top: 10px; }
.notif-recipients summary { cursor: pointer; color: var(--sj-orange-700); font-size: .85rem; }
.notif-recipients ul { list-style: none; padding: 8px 0 0; margin: 0; }
.notif-recipients li { padding: 4px 0; font-size: .85rem; display: flex; gap: 8px; align-items: baseline; }
.notif-rec-name { font-weight: 600; color: var(--sj-text); }
.notif-rec-email { color: var(--sj-text-muted); }
.notif-rec-read { color: var(--sj-emerald-700); margin-left: auto; font-size: .75rem; }
.notif-rec-unread { color: var(--sj-text-muted); margin-left: auto; font-size: .75rem; }

/* Audience picker cards on compose */
.adm-audience-card {
  display: block;
  position: relative;
  border: 1.5px solid var(--sj-border);
  border-radius: 12px;
  padding: 14px;
  background: #fff;
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
  height: 100%;
}
.adm-audience-card:hover { border-color: var(--sj-orange-300); }
.adm-audience-card input { position: absolute; opacity: 0; pointer-events: none; }
.adm-audience-card:has(input:checked) {
  border-color: var(--sj-orange-500);
  background: var(--sj-orange-50);
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}
.adm-audience-body { display: flex; flex-direction: column; gap: 4px; }
.adm-audience-body > i { font-size: 1.5rem; color: var(--sj-orange-600); }
.adm-audience-card:has(input:checked) .adm-audience-body > i { color: var(--sj-orange-700); }
.adm-audience-title { font-weight: 700; color: var(--sj-ink); }
.adm-audience-sub { font-size: .82rem; color: var(--sj-text-muted); }

.adm-role-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.adm-role-pill { cursor: pointer; }
.adm-role-pill input { position: absolute; opacity: 0; }
.adm-role-pill span {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--sj-border);
  background: #fff;
  border-radius: 999px;
  padding: 6px 12px;
  font-size: .85rem;
  color: var(--sj-text);
  transition: border-color .15s, background .15s;
}
.adm-role-pill input:checked + span {
  border-color: var(--sj-orange-500);
  background: var(--sj-orange-50);
  color: var(--sj-orange-800);
}

.adm-user-list {
  max-height: 320px;
  overflow-y: auto;
  border: 1px solid var(--sj-border);
  border-radius: 10px;
}
.adm-user-row {
  display: grid;
  grid-template-columns: 22px 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  border-bottom: 1px solid var(--sj-border-soft);
}
.adm-user-row:last-child { border-bottom: 0; }
.adm-user-row:hover { background: var(--sj-bg-alt); }
.adm-user-name { font-weight: 600; color: var(--sj-text); }
.adm-user-email { color: var(--sj-text-muted); font-size: .85rem; }

/* Topbar bell dropdown */
.adm-bell { position: relative; }
.adm-bell-badge {
  position: absolute; top: 4px; right: 4px;
  background: var(--sj-orange-600); color: #fff;
  border-radius: 999px;
  font-size: .65rem; font-weight: 700;
  padding: 1px 5px;
  border: 1.5px solid #fff;
  min-width: 16px; text-align: center;
  line-height: 1.1;
}
.adm-bell-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-width: 92vw;
  background: #fff;
  border: 1px solid var(--sj-border);
  border-radius: 14px;
  box-shadow: var(--sj-shadow-lg);
  z-index: 30;
  overflow: hidden;
}
.adm-bell.is-open .adm-bell-menu { display: block; }
.adm-bell-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--sj-border-soft); }
.adm-bell-title { font-weight: 700; color: var(--sj-ink); }
.adm-bell-sub { color: var(--sj-text-muted); font-size: .8rem; }
.adm-bell-clear { background: transparent; border: 0; color: var(--sj-text-muted); cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.adm-bell-clear:hover { background: var(--sj-bg-alt); color: var(--sj-orange-700); }
.adm-bell-list { list-style: none; margin: 0; padding: 6px 6px; max-height: 380px; overflow-y: auto; }
.adm-bell-item .adm-bell-link {
  display: grid;
  grid-template-columns: 36px 1fr 10px;
  gap: 10px; align-items: flex-start;
  padding: 10px 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--sj-text);
}
.adm-bell-item .adm-bell-link:hover { background: var(--sj-bg-alt); }
.adm-bell-item.is-unread .adm-bell-link { background: var(--sj-orange-50); }
.adm-bell-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--sj-ink); color: #fff; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem;
}
.adm-bell-row1 { display: flex; justify-content: space-between; gap: 6px; }
.adm-bell-sender { font-weight: 700; color: var(--sj-ink); font-size: .85rem; }
.adm-bell-time { color: var(--sj-text-muted); font-size: .72rem; white-space: nowrap; }
.adm-bell-msg { display: block; color: var(--sj-text); font-size: .85rem; margin-top: 2px; }
.adm-bell-preview { display: block; color: var(--sj-text-muted); font-size: .78rem; margin-top: 2px; }
.adm-bell-dot { width: 8px; height: 8px; background: var(--sj-orange-600); border-radius: 50%; margin-top: 8px; }
.adm-bell-empty { padding: 30px 14px; text-align: center; color: var(--sj-text-muted); font-size: .9rem; }
.adm-bell-empty i { font-size: 2rem; color: var(--sj-text-faint); display: block; margin-bottom: 6px; }
.adm-bell-foot {
  display: grid; grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--sj-border-soft);
}
.adm-bell-foot a {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px;
  color: var(--sj-text);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, color .15s;
}
.adm-bell-foot a + a { border-left: 1px solid var(--sj-border-soft); }
.adm-bell-foot a:hover { background: var(--sj-orange-50); color: var(--sj-orange-700); }

.adm-chip-count.is-emphasis { background: var(--sj-orange-600); color: #fff; }


/* ============================================================
   CONFIG LOOKUP — two-column add form + inline-editable list
============================================================ */
.adm-lkp-layout .adm-section { height: 100%; }
.adm-section-head-row { display: flex; align-items: center; gap: 12px; }
.adm-search-inline {
  position: relative;
  flex: 0 0 280px;
  max-width: 320px;
}
.adm-search-inline i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--sj-text-muted); font-size: .9rem;
}
.adm-search-inline input {
  padding-left: 36px;
  background: var(--sj-bg-alt);
  border: 1px solid var(--sj-border-soft);
  border-radius: 8px;
  font-size: .85rem;
}
.adm-search-inline input:focus {
  background: #fff;
  border-color: var(--sj-orange-300);
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}

/* List header + rows (a faux table built with CSS grid so each
   row can be an actual <form> without HTML table form-span limits) */
.adm-lkp-list { padding: .25rem 0; }
.adm-lkp-list-head,
.adm-lkp-row-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px 70px 130px 50px;
  gap: 10px;
  align-items: center;
  padding: 8px 14px;
}
.adm-lkp-list-head { padding-right: 60px; } /* leave room for trash column alignment */
.adm-lkp-row-form { flex: 1; }
.adm-lkp-row-delete { padding: 0 14px 0 0; margin: 0; }
.adm-lkp-row .cell-actions {
  display: flex; gap: 4px; justify-content: flex-end;
}
.adm-lkp-row .cfg-save-btn {
  width: 36px;
  padding: .25rem .5rem;
}
.adm-lkp-list-head {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sj-text-muted);
  background: var(--sj-bg-alt);
  border-top: 1px solid var(--sj-border-soft);
  border-bottom: 1px solid var(--sj-border-soft);
}
.adm-lkp-row {
  position: relative;
  border-bottom: 1px solid var(--sj-border-soft);
  display: flex;
  align-items: center;
}
.adm-lkp-row:last-child { border-bottom: 0; }
.adm-lkp-row:hover { background: var(--sj-bg-soft); }
.adm-lkp-row-form { flex: 1; }
.adm-lkp-row-delete { padding: 0 14px 0 0; }
.adm-lkp-row .cell-actions { text-align: right; }
.adm-lkp-row .form-control {
  background: #fff;
  border: 1px solid var(--sj-border);
}
.adm-lkp-row .form-control:focus {
  border-color: var(--sj-orange-400);
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}

.adm-usage-chip {
  display: inline-block;
  background: var(--sj-emerald-50);
  color: var(--sj-emerald-800);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: .75rem;
  font-weight: 700;
}

/* Quick tip card under the add form */
.adm-tip-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px;
  background: var(--sj-orange-50);
  border: 1px solid var(--sj-orange-100);
  border-radius: 12px;
}
.adm-tip-card > i { color: var(--sj-orange-700); font-size: 1.25rem; margin-top: 2px; }
.adm-tip-title { font-weight: 700; color: var(--sj-ink); margin-bottom: 4px; }
.adm-tip-card p { font-size: .85rem; color: var(--sj-text); margin: 0; line-height: 1.5; }

@media (max-width: 768px) {
  .adm-lkp-list-head { display: none; }
  .adm-lkp-row-form {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 10px 14px;
  }
  .adm-lkp-row-form .cell-name { grid-column: span 2; }
  .adm-search-inline { flex: 1; max-width: none; }
}


/* ============================================================
   PAGINATION + FILTER BAR
============================================================ */
.adm-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin: 1rem 0 0;
  padding: .85rem 1rem;
  background: #fff;
  border: 1px solid var(--sj-border-soft);
  border-radius: 12px;
}
.adm-pagination-left {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.adm-pagination-info { color: var(--sj-text-muted); font-size: .85rem; }
.adm-pagination-info strong { color: var(--sj-ink); }
.adm-pagination-perpage {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--sj-text-muted); font-size: .85rem;
  margin: 0;
}
.adm-pagination-perpage select {
  background: #fff;
  border: 1px solid var(--sj-border);
  border-radius: 8px;
  padding: 3px 24px 3px 10px;
  font-size: .85rem;
  color: var(--sj-text);
  cursor: pointer;
}
.adm-pagination-perpage select:focus {
  outline: none;
  border-color: var(--sj-orange-300);
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}
.adm-pagination-list {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
.adm-pagination-btn {
  display: inline-flex; align-items: center; gap: 4px;
  min-width: 34px; height: 34px;
  padding: 0 10px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--sj-border-soft);
  color: var(--sj-text);
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
}
.adm-pagination-btn:hover { background: var(--sj-orange-50); border-color: var(--sj-orange-200); color: var(--sj-orange-700); }
.adm-pagination-btn.is-active {
  background: var(--sj-orange-600);
  border-color: var(--sj-orange-600);
  color: #fff;
  box-shadow: var(--sj-shadow-primary);
}
.adm-pagination-btn.is-disabled { opacity: .4; pointer-events: none; }
.adm-pagination-ellipsis { display: inline-flex; align-items: center; padding: 0 6px; color: var(--sj-text-muted); }

/* Filter bar — search + dropdowns inline */
.adm-filter-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}
.adm-filter-search {
  position: relative;
  flex: 1 1 240px;
  min-width: 200px;
}
.adm-filter-search i {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--sj-text-muted); pointer-events: none;
}
.adm-filter-search input {
  padding-left: 36px;
  background: #fff;
  border: 1px solid var(--sj-border);
  border-radius: 10px;
}
.adm-filter-search input:focus {
  border-color: var(--sj-orange-300);
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}
.adm-filter-bar .form-select {
  flex: 0 0 200px;
  background: #fff;
  border: 1px solid var(--sj-border);
  border-radius: 10px;
}
.adm-filter-bar .form-select:focus {
  border-color: var(--sj-orange-300);
  box-shadow: 0 0 0 3px rgba(249,115,22,.12);
}
@media (max-width: 640px) {
  .adm-filter-bar .form-select { flex: 1 1 100%; }
}

.adm-filter-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  padding: .375rem .85rem;
  background: #fff;
  border: 1px solid var(--sj-border);
  border-radius: 10px;
  cursor: pointer;
  user-select: none;
  font-size: .9rem;
  white-space: nowrap;
}
.adm-filter-toggle:has(input:checked) {
  background: var(--sj-orange-50);
  border-color: var(--sj-orange-300);
  color: var(--sj-orange-800);
}
.adm-callout {
  background: var(--sj-bg-alt);
  border-left: 3px solid var(--sj-orange-400);
  padding: 12px 14px;
  border-radius: 8px;
  font-size: .92rem;
  white-space: pre-wrap;
}
.adm-timeline { list-style: none; padding: 0; margin: 0; }
.adm-timeline li {
  position: relative;
  padding: 0 0 16px 22px;
  border-left: 2px solid var(--sj-border-soft);
  margin-left: 6px;
}
.adm-timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.adm-timeline-dot {
  position: absolute; left: -7px; top: 4px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--sj-orange-500);
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--sj-orange-200);
}

/* ============================================================
   SORTABLE COLUMN HEADERS (config lookup + other tables)
============================================================ */
.adm-sort-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: color .12s;
}
.adm-sort-link:hover { color: var(--sj-orange-700); }
.adm-sort-icon {
  font-size: .95rem;
  line-height: 1;
}
.adm-sort-idle   { opacity: .35; }
.adm-sort-link:hover .adm-sort-idle { opacity: .8; }
.adm-sort-active {
  color: var(--sj-orange-600);
  opacity: 1;
  font-size: 1.1rem;
}

/* ============================================================
   JOB VIEW (public) — hero + cards + similar jobs
============================================================ */
.jv-hero {
  background:
    radial-gradient(50% 80% at 0% 30%, rgba(234, 88, 12, .14) 0%, transparent 60%),
    radial-gradient(45% 80% at 100% 70%, rgba(16, 185, 129, .14) 0%, transparent 60%),
    linear-gradient(180deg, #FFFBF7 0%, #FFFFFF 100%);
  border-bottom: 1px solid var(--sj-border-soft);
  padding: 2rem 0 2rem;
  margin-bottom: .5rem;
}
.jv-breadcrumb {
  font-size: .8rem;
  color: var(--sj-text-muted);
  margin-bottom: 1.25rem;
}
.jv-breadcrumb a {
  color: var(--sj-text-muted);
  text-decoration: none;
}
.jv-breadcrumb a:hover { color: var(--sj-orange-700); }
.jv-breadcrumb .sep { margin: 0 6px; opacity: .5; }
.jv-breadcrumb .active { color: var(--sj-ink); font-weight: 600; }

.jv-hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
}
.jv-hero-main {
  display: flex; align-items: center; gap: 18px;
}
.jv-logo {
  width: 72px; height: 72px;
  border-radius: 14px;
  background: var(--sj-gradient-warm);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.4rem;
  letter-spacing: -.02em;
  box-shadow: var(--sj-shadow-primary);
  flex-shrink: 0;
  overflow: hidden;
}
.jv-logo img { width: 100%; height: 100%; object-fit: cover; }
.jv-titles { min-width: 0; }
.jv-title {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-weight: 800;
  font-size: 1.85rem;
  letter-spacing: -.025em;
  color: var(--sj-ink);
  margin: 0 0 4px;
  line-height: 1.2;
}
.jv-company {
  color: var(--sj-text-soft);
  font-size: 1rem;
  font-weight: 500;
}
.jv-company a {
  color: var(--sj-orange-700);
  text-decoration: none;
  font-weight: 600;
}
.jv-company a:hover { text-decoration: underline; }
.jv-dot { margin: 0 6px; opacity: .5; }
.jv-posted { color: var(--sj-text-muted); font-size: .9rem; }

.jv-hero-pills {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.jv-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: #fff;
  border: 1px solid var(--sj-border-soft);
  color: var(--sj-text);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: .85rem;
  font-weight: 500;
  box-shadow: var(--sj-shadow-xs);
}
.jv-pill i { color: var(--sj-text-muted); }
.jv-pill-salary {
  background: var(--sj-emerald-50);
  border-color: var(--sj-emerald-200);
  color: var(--sj-emerald-800);
  font-weight: 700;
}
.jv-pill-salary i { color: var(--sj-emerald-700); }
.jv-pill-remote {
  background: var(--sj-emerald-500);
  border-color: var(--sj-emerald-500);
  color: #fff;
  font-weight: 600;
}
.jv-pill-remote i { color: #fff; }
.jv-pill-featured {
  background: var(--sj-amber-400);
  border-color: var(--sj-amber-400);
  color: #422006;
  font-weight: 700;
}
.jv-pill-featured i { color: #422006; }

/* ----- Body cards ----- */
.jv-card {
  background: #fff;
  border: 1px solid var(--sj-border-soft);
  border-radius: 14px;
  padding: 1.25rem 1.4rem;
  box-shadow: var(--sj-shadow-sm);
  margin-bottom: 1rem;
}
.jv-card-title {
  display: flex; align-items: center; gap: 8px;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--sj-text-muted);
  margin: 0 0 .85rem;
}
.jv-card-title i { color: var(--sj-orange-600); font-size: 1rem; }
.jv-card-skills .jv-card-title i { color: var(--sj-amber-400); }

.jv-skill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.jv-skill {
  background: var(--sj-orange-50);
  color: var(--sj-orange-800);
  border: 1px solid var(--sj-orange-100);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: .88rem;
  font-weight: 600;
}

.jv-description {
  color: var(--sj-text);
  line-height: 1.75;
  font-size: 1rem;
  word-break: break-word;
}
.jv-description p { margin-bottom: 1em; }

/* ----- Share row ----- */
.jv-share {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 1.25rem 0;
}
.jv-share-label {
  font-size: .85rem;
  font-weight: 600;
  color: var(--sj-text-muted);
  margin-right: 6px;
  display: inline-flex; align-items: center; gap: 6px;
}
.jv-share-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--sj-border);
  color: var(--sj-text-soft);
  display: inline-flex; align-items: center; justify-content: center;
  text-decoration: none;
  font-size: .95rem;
  cursor: pointer;
  transition: all .15s;
}
.jv-share-btn:hover {
  background: var(--sj-orange-50);
  color: var(--sj-orange-700);
  border-color: var(--sj-orange-200);
  transform: translateY(-1px);
}

/* ----- Sidebar ----- */
.jv-sticky { position: sticky; top: 88px; }
.jv-apply-card {
  background:
    radial-gradient(50% 50% at 100% 0%, rgba(234, 88, 12, .08) 0%, transparent 60%),
    #fff;
  border-color: var(--sj-orange-100);
  box-shadow: var(--sj-shadow);
}
.jv-btn-primary {
  background: var(--sj-gradient-warm);
  color: #fff;
  border: 0;
  font-weight: 600;
  box-shadow: var(--sj-shadow-primary);
  padding: .65rem 1rem;
}
.jv-btn-primary:hover { color: #fff; filter: brightness(1.05); transform: translateY(-1px); }

.jv-co-mini {
  width: 44px; height: 44px;
  border-radius: 10px;
  background: var(--sj-ink);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem;
  flex-shrink: 0;
}
.jv-co-mini.sm { width: 36px; height: 36px; font-size: .85rem; border-radius: 8px; }

.jv-facts {
  margin: 0;
  display: grid;
  grid-template-columns: 100px 1fr;
  row-gap: 8px;
  column-gap: 12px;
  font-size: .9rem;
}
.jv-facts dt {
  font-weight: 600;
  color: var(--sj-text-muted);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.jv-facts dd { margin: 0; color: var(--sj-text); }

/* ----- Similar jobs ----- */
.jv-similar {
  background: var(--sj-bg-canvas);
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--sj-border-soft);
}
.jv-similar-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
  gap: 12px;
}
.jv-similar-head h2 {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--sj-ink);
  margin: 0;
  display: flex; align-items: center; gap: 10px;
}
.jv-similar-head h2 i { color: var(--sj-orange-600); }
.jv-similar-link {
  color: var(--sj-orange-700);
  font-weight: 600;
  text-decoration: none;
  font-size: .9rem;
}
.jv-similar-link:hover { text-decoration: underline; }

.jv-similar-card {
  display: block;
  background: #fff;
  border: 1px solid var(--sj-border-soft);
  border-radius: 14px;
  padding: 18px;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.jv-similar-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--sj-shadow-md);
  border-color: var(--sj-orange-200);
  color: inherit;
}
.jv-similar-head-row {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px;
}
.jv-pill-mini {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--sj-amber-400);
  color: #422006;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: .7rem;
  font-weight: 700;
}
.jv-similar-title {
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--sj-ink);
  margin-bottom: 2px;
  line-height: 1.3;
}
.jv-similar-company {
  color: var(--sj-text-muted);
  font-size: .85rem;
  margin-bottom: 10px;
}
.jv-similar-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-size: .8rem;
  color: var(--sj-text-soft);
  margin-bottom: 10px;
}
.jv-similar-meta i { color: var(--sj-text-muted); margin-right: 3px; }
.jv-similar-salary {
  color: var(--sj-emerald-700);
  font-weight: 700;
  font-size: .92rem;
  padding-top: 10px;
  border-top: 1px solid var(--sj-border-soft);
}

@media (max-width: 768px) {
  .jv-hero { padding: 1.25rem 0; }
  .jv-title { font-size: 1.35rem; }
  .jv-logo { width: 56px; height: 56px; font-size: 1.1rem; }
  .jv-facts { grid-template-columns: 90px 1fr; }
  .jv-sticky { position: static; }
}

/* ============================================================
   JOB VIEW — Premium polish layer
============================================================ */
.jv-hero {
  background:
    radial-gradient(45% 60% at 8% 15%, rgba(234, 88, 12, .22) 0%, transparent 65%),
    radial-gradient(40% 55% at 92% 80%, rgba(16, 185, 129, .18) 0%, transparent 65%),
    radial-gradient(30% 40% at 50% 0%, rgba(251, 191, 36, .12) 0%, transparent 70%),
    linear-gradient(180deg, #FFFDF9 0%, #FFFFFF 100%);
  padding: 2.5rem 0 2.25rem;
  position: relative;
  overflow: hidden;
}
.jv-hero::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--sj-noise);
  opacity: .35;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.jv-hero > .container { position: relative; z-index: 1; }

/* Logo: premium gradient + ring + glow */
.jv-logo {
  width: 88px; height: 88px;
  border-radius: 20px;
  background:
    linear-gradient(135deg, #FB923C 0%, #EA580C 50%, #C2410C 100%);
  position: relative;
  font-size: 1.6rem;
  font-weight: 800;
  box-shadow:
    0 1px 0 rgba(255,255,255,.4) inset,
    0 -2px 6px rgba(124, 45, 18, .25) inset,
    0 8px 20px rgba(234, 88, 12, .35),
    0 16px 32px rgba(234, 88, 12, .22),
    0 24px 48px rgba(234, 88, 12, .14);
}
.jv-logo::before {
  content: "";
  position: absolute; inset: 2px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.18) 0%, transparent 50%);
  pointer-events: none;
}
.jv-logo::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 21px;
  background: linear-gradient(135deg, rgba(255,255,255,.3), transparent 60%);
  z-index: -1;
  pointer-events: none;
}

/* Title: bigger, tighter, slight gradient on first word */
.jv-title {
  font-size: 2.1rem;
  letter-spacing: -.03em;
  line-height: 1.15;
  background: linear-gradient(180deg, var(--sj-ink) 0%, #1E293B 100%);
  -webkit-background-clip: text;
  background-clip: text;
}
.jv-company { font-size: 1.05rem; }
.jv-company a {
  position: relative;
  background: linear-gradient(135deg, var(--sj-orange-700), var(--sj-orange-500));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-fill-color: transparent;
}

/* Premium pills with subtle gradients + lift on hover */
.jv-pill {
  background:
    linear-gradient(180deg, #ffffff 0%, #FDFCFB 100%);
  border-color: rgba(15, 23, 42, .08);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 1px 2px rgba(15, 23, 42, .04),
    0 2px 6px rgba(15, 23, 42, .04);
  padding: 8px 16px;
  font-size: .88rem;
  transition: transform .15s, box-shadow .15s;
}
.jv-pill:hover {
  transform: translateY(-1px);
  box-shadow:
    0 1px 0 rgba(255,255,255,1) inset,
    0 4px 8px rgba(15, 23, 42, .06),
    0 8px 16px rgba(15, 23, 42, .05);
}
.jv-pill-salary {
  background: linear-gradient(135deg, #ECFDF5 0%, #D1FAE5 100%);
  border-color: var(--sj-emerald-300);
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 2px 4px rgba(5, 95, 70, .10),
    0 8px 16px rgba(5, 150, 105, .12);
}
.jv-pill-remote {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  border-color: transparent;
  box-shadow:
    0 1px 0 rgba(255,255,255,.25) inset,
    0 4px 12px rgba(5, 150, 105, .35);
}
.jv-pill-featured {
  background: linear-gradient(135deg, #FCD34D 0%, #F59E0B 70%, #D97706 100%);
  border-color: transparent;
  box-shadow:
    0 1px 0 rgba(255,255,255,.35) inset,
    0 4px 12px rgba(217, 119, 6, .35),
    0 0 0 0 rgba(251, 191, 36, .4);
  animation: jvPulse 3s ease-in-out infinite;
}
@keyframes jvPulse {
  0%, 100% { box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 4px 12px rgba(217, 119, 6, .35), 0 0 0 0 rgba(251, 191, 36, .35); }
  50%      { box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 4px 12px rgba(217, 119, 6, .35), 0 0 0 8px rgba(251, 191, 36, 0); }
}

/* Premium body cards: layered shadow, edge highlight */
.jv-card {
  border-radius: 16px;
  border: 1px solid rgba(15, 23, 42, .06);
  padding: 1.4rem 1.5rem;
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 1px 3px rgba(15, 23, 42, .04),
    0 8px 24px rgba(15, 23, 42, .04);
  margin-bottom: 1.25rem;
  position: relative;
  overflow: hidden;
}
.jv-card-skills {
  background:
    radial-gradient(40% 80% at 100% 0%, rgba(251, 191, 36, .08) 0%, transparent 70%),
    linear-gradient(180deg, #FFFEFB 0%, #FFFFFF 100%);
}
.jv-card-title {
  font-size: .78rem;
  letter-spacing: .12em;
  margin-bottom: 1rem;
}

/* Skill pills: premium gradient + hover glow */
.jv-skill {
  background:
    linear-gradient(135deg, var(--sj-orange-50) 0%, #FFF7ED 100%);
  border: 1px solid var(--sj-orange-200);
  border-radius: 10px;
  padding: 7px 14px;
  font-size: .9rem;
  font-weight: 600;
  color: var(--sj-orange-800);
  transition: all .2s;
  box-shadow:
    0 1px 0 rgba(255,255,255,.7) inset,
    0 1px 2px rgba(194, 65, 12, .05);
}
.jv-skill:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, var(--sj-orange-100) 0%, var(--sj-orange-50) 100%);
  border-color: var(--sj-orange-400);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 4px 10px rgba(234, 88, 12, .18);
}

/* Description: refined reading typography */
.jv-description {
  font-size: 1.02rem;
  line-height: 1.78;
  color: #334155;
}
.jv-description::first-letter {
  font-size: 1.15em;
  font-weight: 600;
  color: var(--sj-ink);
}

/* Apply card: signature premium feel */
.jv-apply-card {
  background:
    radial-gradient(70% 70% at 100% 0%, rgba(234, 88, 12, .12) 0%, transparent 60%),
    radial-gradient(40% 40% at 0% 100%, rgba(16, 185, 129, .08) 0%, transparent 70%),
    #FFFFFF;
  border: 1px solid var(--sj-orange-100);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 4px 12px rgba(234, 88, 12, .08),
    0 16px 40px rgba(15, 23, 42, .06);
}
.jv-btn-primary {
  background:
    linear-gradient(135deg, #F59E0B 0%, #EA580C 35%, #C2410C 100%);
  font-weight: 700;
  letter-spacing: .01em;
  padding: .85rem 1.25rem;
  font-size: .95rem;
  border-radius: 11px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -2px 6px rgba(124, 45, 18, .2) inset,
    0 4px 10px rgba(234, 88, 12, .25),
    0 8px 20px rgba(234, 88, 12, .2);
  transition: all .2s;
}
.jv-btn-primary::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.2) 0%, transparent 50%);
  pointer-events: none;
}
.jv-btn-primary:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -2px 6px rgba(124, 45, 18, .2) inset,
    0 8px 16px rgba(234, 88, 12, .3),
    0 16px 32px rgba(234, 88, 12, .25);
}

/* Mini company logo with depth */
.jv-co-mini {
  background: linear-gradient(135deg, #1E293B 0%, #0B1220 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.1) inset,
    0 4px 10px rgba(15, 23, 42, .15);
}

/* Share buttons: premium pill style */
.jv-share {
  margin: 1.5rem 0;
  padding: 14px 18px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FAFAF9 100%);
  border: 1px solid rgba(15, 23, 42, .06);
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 3px rgba(15, 23, 42, .04);
}
.jv-share-btn {
  box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 1px 2px rgba(15, 23, 42, .05);
}
.jv-share-btn:hover {
  background: var(--sj-gradient-warm);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 4px 12px rgba(234, 88, 12, .3);
}

/* Similar jobs: premium card hover */
.jv-similar {
  background:
    radial-gradient(40% 50% at 100% 0%, rgba(234, 88, 12, .04) 0%, transparent 70%),
    var(--sj-bg-canvas);
}
.jv-similar-card {
  border: 1px solid rgba(15, 23, 42, .06);
  box-shadow:
    0 1px 0 rgba(255,255,255,.8) inset,
    0 1px 3px rgba(15, 23, 42, .03);
  position: relative;
  overflow: hidden;
}
.jv-similar-card::before {
  content: "";
  position: absolute;
  inset: -2px -2px auto -2px;
  height: 4px;
  background: var(--sj-gradient-warm);
  opacity: 0;
  transition: opacity .2s;
}
.jv-similar-card:hover {
  border-color: rgba(234, 88, 12, .25);
  box-shadow:
    0 1px 0 rgba(255,255,255,.9) inset,
    0 8px 20px rgba(15, 23, 42, .06),
    0 16px 40px rgba(15, 23, 42, .06);
}
.jv-similar-card:hover::before { opacity: 1; }
.jv-similar-title { font-size: 1.1rem; letter-spacing: -.01em; }

/* Hero pills row gets a soft container backdrop for cohesion */
.jv-hero-pills {
  gap: 10px;
  padding-top: .25rem;
}

/* Section card sleek titles */
.jv-card-title i {
  font-size: 1.05rem;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: var(--sj-orange-50);
}
.jv-card-skills .jv-card-title i { background: #FEF3C7; }

@media (max-width: 768px) {
  .jv-title { font-size: 1.5rem; }
  .jv-logo { width: 64px; height: 64px; font-size: 1.2rem; border-radius: 16px; }
  .jv-hero { padding: 1.5rem 0; }
}