/* ============================================================================
   WFHJ — "Pro mode" dark theme design system
   Near-black premium theme inspired by the resume-first job-copilot pattern.
   Loaded AFTER Bootstrap so it overrides Bootstrap's default light look, letting
   every inner page (jobs, auth, dashboard) inherit the dark aesthetic for free.
   ========================================================================== */

:root {
  /* Surfaces */
  --bg:          #08080c;
  --bg-1:        #0c0d12;   /* raised panel */
  --bg-2:        #12131a;   /* card */
  --bg-3:        #191b24;   /* hover / input */
  --line:        rgba(255,255,255,.08);
  --line-2:      rgba(255,255,255,.14);

  /* Text */
  --fg:          #ffffff;
  --fg-1:        rgba(255,255,255,.72);
  --fg-2:        rgba(255,255,255,.50);
  --fg-3:        rgba(255,255,255,.34);

  /* Accents (per-section gradient headline pairs) */
  --violet:      #7c5cff;
  --blue:        #3b82f6;
  --pink:        #ff5da2;
  --orange:      #ff9d43;
  --yellow:      #ffc94d;
  --green:       #35d07f;

  --grad-hero:   linear-gradient(90deg, #ff5da2 0%, #ff9d43 60%, #ffc94d 100%);
  --grad-blue:   linear-gradient(90deg, #3b82f6 0%, #7c5cff 100%);
  --grad-violet: linear-gradient(90deg, #a78bfa 0%, #7c5cff 100%);
  --grad-warm:   linear-gradient(90deg, #ffc94d 0%, #ff8a8a 55%, #b06bff 100%);

  --radius:      16px;
  --radius-sm:   11px;
  --radius-pill: 999px;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --maxw: 1180px;
  --shadow: 0 24px 60px -20px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.011em;
  overflow-x: hidden;
}

/* ambient page glow behind the fold */
body::before {
  content: "";
  position: fixed;
  inset: -20% -10% auto -10%;
  height: 90vh;
  background:
    radial-gradient(50% 45% at 78% 8%, rgba(124,92,255,.16), transparent 70%),
    radial-gradient(45% 40% at 12% 0%, rgba(59,130,246,.12), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

a { color: var(--fg-1); text-decoration: none; }
a:hover { color: var(--fg); }

h1,h2,h3,h4,h5,h6 { color: var(--fg); font-weight: 600; letter-spacing: -0.02em; }

/* --------------------------------------------------------------- typography */
.dw-mono { font-family: var(--font-mono); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: .74rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg-2);
  font-weight: 500;
}
.eyebrow.is-blue   { color: #6ea8ff; }
.eyebrow.is-green  { color: #4ee39a; }
.eyebrow.is-violet { color: #b39bff; }
.eyebrow.is-yellow { color: #ffcd57; }

.display {
  font-size: clamp(2.6rem, 6vw, 4.9rem);
  line-height: 1.02;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--fg);
  margin: 0;
}
.display .grad {
  background: var(--grad-hero);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.grad-blue   .grad, .grad.is-blue   { background: var(--grad-blue);   -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.grad-violet .grad, .grad.is-violet { background: var(--grad-violet); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.grad-warm   .grad, .grad.is-warm   { background: var(--grad-warm);   -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }

.lead {
  color: var(--fg-2);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.6;
}

/* --------------------------------------------------------------- buttons */
.btn, a.btn {
  --btn-bg: var(--bg-3);
  --btn-fg: var(--fg);
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-sans);
  font-weight: 600; font-size: .95rem;
  padding: .72rem 1.4rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-2);
  background: var(--btn-bg);
  color: var(--btn-fg) !important;
  cursor: pointer;
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover, a.btn:hover { transform: translateY(-1px); border-color: var(--line-2); }
.btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(124,92,255,.35); }

.btn-primary, a.btn-primary,
.btn-gradient, a.btn-gradient {
  background: var(--grad-blue) !important;
  border: none;
  color: #fff !important;
  box-shadow: 0 10px 30px -10px rgba(124,92,255,.65);
}
.btn-primary:hover, a.btn-primary:hover,
.btn-gradient:hover { box-shadow: 0 16px 38px -10px rgba(124,92,255,.8); }

.btn-ghost, a.btn-ghost {
  background: rgba(255,255,255,.04);
  border: 1px solid var(--line-2);
}
.btn-glow, a.btn-glow {
  background: rgba(124,92,255,.10);
  border: 1px solid rgba(124,92,255,.55);
  box-shadow: 0 0 0 1px rgba(124,92,255,.15), 0 14px 40px -16px rgba(124,92,255,.6);
}
.btn-glow:hover { background: rgba(124,92,255,.18); }

.btn-light, a.btn-light { background: #fff !important; color: #08080c !important; border: none; }
.btn-outline-light, a.btn-outline-light { background: transparent !important; color: var(--fg) !important; border: 1px solid var(--line-2); }
.btn-lg { padding: .95rem 1.7rem; font-size: 1.02rem; }
.btn-sm { padding: .5rem 1rem; font-size: .85rem; }

/* map bootstrap semantic buttons into the dark system */
.btn-success { background: linear-gradient(90deg,#2fbf71,#35d07f)!important; border:none; color:#04120b!important; }
.btn-danger  { background: #e5484d!important; border:none; color:#fff!important; }
.btn-secondary { background: var(--bg-3)!important; border:1px solid var(--line-2); color:var(--fg)!important; }
.btn-outline-primary { background: transparent!important; color: var(--fg)!important; border:1px solid rgba(124,92,255,.55); }
.btn-outline-secondary { background: transparent!important; color: var(--fg-1)!important; border:1px solid var(--line-2); }

/* --------------------------------------------------------------- layout */
.container { max-width: var(--maxw); position: relative; z-index: 1; }
.section { padding: clamp(4.5rem, 10vw, 8.5rem) 0; position: relative; }
.section-tight { padding: clamp(3rem, 6vw, 5rem) 0; }
.center { text-align: center; }
.stack-sm > * + * { margin-top: .9rem; }

/* --------------------------------------------------------------- cards / panels */
.card, .panel {
  background: var(--bg-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  color: var(--fg-1) !important;
  box-shadow: none;
}
.card .card-title, .card h5, .card h4, .card h3 { color: var(--fg) !important; }
.card .card-body { color: var(--fg-1); }
.card a { color: #a9b6ff; }
.card a:hover { color: #cfd7ff; }
.text-muted, .text-white-50, small.text-muted { color: var(--fg-2) !important; }
.text-success { color: #4ee39a !important; }
.text-primary { color: #a9b6ff !important; }
.bg-light { background: var(--bg-1) !important; color: var(--fg-1) !important; }
.bg-dark  { background: #06060a !important; }
.bg-primary { background: transparent !important; }
hr { border-color: var(--line) !important; opacity: 1; }

.panel-glass {
  background: linear-gradient(180deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  backdrop-filter: blur(6px);
}

/* --------------------------------------------------------------- badges / chips */
.badge {
  font-weight: 600; letter-spacing: .01em;
  border-radius: var(--radius-pill);
  padding: .38em .8em;
}
.badge.bg-primary { background: rgba(124,92,255,.16) !important; color: #c3b6ff !important; border:1px solid rgba(124,92,255,.3); }
.badge.bg-success { background: rgba(53,208,127,.14) !important; color:#7ff0b4 !important; }
.badge.bg-danger  { background: rgba(229,72,77,.18) !important; color:#ff9fa2 !important; }
.badge.bg-secondary { background: var(--bg-3) !important; color: var(--fg-1) !important; }

.chip {
  display:inline-flex; align-items:center; gap:.4rem;
  font-family: var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--fg-2);
  padding:.5rem .85rem; border-radius: var(--radius-pill);
  border:1px solid var(--line-2); background: rgba(255,255,255,.02);
}

.pill-proof {
  display:inline-flex; align-items:center; gap:.7rem;
  padding:.5rem .5rem .5rem .9rem; border-radius: var(--radius-pill);
  border:1px solid var(--line-2); background: rgba(255,255,255,.03);
  font-size:.86rem; color: var(--fg-1);
}
.pill-proof .stat { color: var(--fg-2); font-size:.82rem; }

/* --------------------------------------------------------------- forms */
.form-control, .form-select, input[type=text], input[type=email],
input[type=password], input[type=search], input[type=number], textarea, select {
  background: var(--bg-1) !important;
  border: 1px solid var(--line-2) !important;
  color: var(--fg) !important;
  border-radius: var(--radius-sm) !important;
}
.form-control::placeholder, .form-select::placeholder { color: var(--fg-3) !important; }
.form-control:focus, .form-select:focus {
  background: var(--bg-1) !important;
  border-color: rgba(124,92,255,.6) !important;
  box-shadow: 0 0 0 3px rgba(124,92,255,.18) !important;
  color: var(--fg) !important;
}
.form-select option { background: var(--bg-2); color: var(--fg); }
.form-label, label { color: var(--fg-1); font-weight: 500; }
.form-text { color: var(--fg-3) !important; }
.form-check-input { background-color: var(--bg-3); border-color: var(--line-2); }
.form-check-input:checked { background-color: var(--violet); border-color: var(--violet); }
.input-hero {
  background: var(--bg-1);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-pill);
  padding: .3rem .3rem .3rem 1.2rem;
  display: flex; align-items: center; gap: .5rem;
}
.input-hero input { background: transparent!important; border:none!important; flex:1; box-shadow:none!important; }

/* --------------------------------------------------------------- navbar */
.dw-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(8,8,12,.72);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--line);
}
.dw-nav .inner {
  max-width: var(--maxw); margin: 0 auto;
  display: flex; align-items: center; gap: 1.4rem;
  padding: .9rem 1.1rem;
}
.dw-brand {
  font-family: var(--font-mono); font-weight: 600; font-size: 1.06rem;
  color: var(--fg) !important; letter-spacing: -.01em;
}
.dw-brand .cursor { color: var(--violet); }
.dw-nav .links { display: flex; align-items: center; gap: .35rem; margin-left: .6rem; }
.dw-nav .links a {
  font-size: .92rem; color: var(--fg-2); padding: .5rem .8rem; border-radius: 9px;
}
.dw-nav .links a:hover { color: var(--fg); background: rgba(255,255,255,.05); }
.dw-nav .spacer { flex: 1; }
.dw-nav .right { display: flex; align-items: center; gap: .55rem; }

.dw-burger {
  display: none;
  background: rgba(255,255,255,.04); border:1px solid var(--line-2);
  color: var(--fg); border-radius: 10px; width:40px; height:40px; font-size:1.2rem; cursor:pointer;
}
.dw-mobile { display: none; flex-direction: column; padding: .5rem 1.1rem 1rem; border-top:1px solid var(--line); }
.dw-mobile a { padding:.7rem .2rem; color: var(--fg-1); border-bottom:1px solid var(--line); }
.dw-mobile a:last-child { border-bottom:none; }
.dw-mobile.open { display: flex; }

/* dark dropdown */
.dropdown-menu {
  background: var(--bg-2) !important;
  border: 1px solid var(--line-2) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: var(--shadow);
}
.dropdown-item { color: var(--fg-1) !important; }
.dropdown-item:hover { background: var(--bg-3) !important; color: var(--fg) !important; }
.dropdown-divider { border-color: var(--line) !important; }

/* --------------------------------------------------------------- alerts / tables */
.alert { border-radius: var(--radius-sm); border:1px solid var(--line-2); background: var(--bg-2); color: var(--fg-1); }
.alert-info    { background: rgba(59,130,246,.10); border-color: rgba(59,130,246,.3); color:#bcd4ff; }
.alert-success { background: rgba(53,208,127,.10); border-color: rgba(53,208,127,.3); color:#9ff0c2; }
.alert-warning { background: rgba(255,201,77,.10); border-color: rgba(255,201,77,.3); color:#ffe3a3; }
.alert-danger  { background: rgba(229,72,77,.12); border-color: rgba(229,72,77,.35); color:#ffb3b5; }
.table { color: var(--fg-1); }
.table > :not(caption) > * > * { border-color: var(--line) !important; background: transparent; color: var(--fg-1); }
.table thead th { color: var(--fg-2); font-family: var(--font-mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; font-weight:500; }

/* --------------------------------------------------------------- logo strip */
.logo-strip { display:flex; flex-wrap:wrap; gap: 1.4rem; align-items:center; }
.logo-strip .lg {
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background: var(--bg-2); border:1px solid var(--line); color: var(--fg-1); font-weight:700; font-size:.9rem;
}

/* --------------------------------------------------------------- feature mockups */
.mock {
  background: linear-gradient(180deg, #14161f, #0c0d13);
  border: 1px solid var(--line-2);
  border-radius: 20px;
  box-shadow: var(--shadow);
  overflow: hidden;
}
.mock-phone {
  width: 300px; border-radius: 34px; padding: 12px;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg,#1a1c26,#0b0c11);
  box-shadow: var(--shadow);
}
.mock-phone .screen { background: #0a0b10; border-radius: 24px; overflow:hidden; border:1px solid var(--line); }

.job-mini {
  background: var(--bg-2); border:1px solid var(--line); border-radius: 14px; padding: .9rem 1rem;
}
.fit-ring {
  --p: 92;
  width: 46px; height:46px; border-radius:50%;
  background: conic-gradient(var(--violet) calc(var(--p)*1%), rgba(255,255,255,.08) 0);
  display:grid; place-items:center; position:relative; flex:none;
}
.fit-ring::after { content:""; position:absolute; inset:4px; border-radius:50%; background: var(--bg-2); }
.fit-ring span { position:relative; z-index:1; font-size:.7rem; font-weight:700; color:#fff; }

.auto-row {
  display:flex; align-items:center; justify-content:space-between;
  padding:.85rem 1.05rem; border:1px solid var(--line); border-radius: 12px; background: var(--bg-2);
}
.auto-row .ok { color:#4ee39a; }
.auto-row .tag { font-family:var(--font-mono); font-size:.7rem; letter-spacing:.14em; color:#4ee39a; }

.term {
  font-family: var(--font-mono); font-size:.9rem; color: var(--fg-1);
  background: #0a0b10; border:1px solid var(--line-2); border-radius: 12px; padding: .9rem 1.1rem;
}
.term .prompt { color:#4ee39a; margin-right:.5rem; }

/* --------------------------------------------------------------- pricing */
.price-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.price-card {
  background: var(--bg-2); border:1px solid var(--line); border-radius: 20px; padding: 2rem;
  position: relative;
}
.price-card.is-pro {
  border-color: rgba(124,92,255,.4);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(124,92,255,.12), transparent 60%),
    var(--bg-2);
}
.price-card .amt { font-size: 3rem; font-weight: 700; color: var(--fg); letter-spacing:-.03em; }
.price-card .per { color: var(--fg-2); font-size: 1rem; }
.feat { list-style:none; padding:0; margin:1.4rem 0 0; }
.feat li { display:flex; gap:.6rem; align-items:flex-start; padding:.42rem 0; color:var(--fg-1); font-size:.95rem; }
.feat li i { color:#4ee39a; margin-top:.15rem; flex:none; }
.feat li.muted { color: var(--fg-2); }
.feat li.muted i { color: var(--fg-3); }

/* --------------------------------------------------------------- FAQ */
.faq-item { border-bottom: 1px solid var(--line); }
.faq-q {
  width:100%; text-align:left; background:none; border:none;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1.35rem .25rem; color: var(--fg); font-weight:600; font-size:1.06rem; cursor:pointer;
}
.faq-q .ic { flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line-2); background: rgba(124,92,255,.08); color:#c3b6ff; transition:.2s; }
.faq-a { max-height:0; overflow:hidden; transition: max-height .28s ease; color: var(--fg-2); }
.faq-a .inner { padding: 0 .25rem 1.35rem; line-height:1.6; }
.faq-item.open .faq-a { max-height: 320px; }
.faq-item.open .faq-q .ic { transform: rotate(45deg); background: rgba(124,92,255,.2); }

/* --------------------------------------------------------------- footer */
.dw-footer { border-top:1px solid var(--line); background:#06060a; padding: 3rem 0 2.4rem; margin-top: 4rem; }
.dw-footer .row-top { display:flex; flex-wrap:wrap; gap:1.5rem 2rem; align-items:flex-start; justify-content:space-between; }
.dw-footer a { color: var(--fg-2); font-size:.92rem; }
.dw-footer a:hover { color: var(--fg); }
.dw-footer .cols { display:flex; gap:2.6rem; flex-wrap:wrap; }
.dw-footer .cols h6 { color: var(--fg-2); font-family:var(--font-mono); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:.7rem; }
.dw-footer .cols ul { list-style:none; padding:0; margin:0; }
.dw-footer .cols li { margin:.35rem 0; }

/* --------------------------------------------------------------- scroll reveal
   Progressive enhancement: content is visible by default. Only when JS is active
   (html.js) do we hide-then-animate, so a slow/failed observer or no-JS never
   leaves a section — especially the hero — blank. */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s ease; }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .reveal { opacity:1; transform:none; transition:none; } html{scroll-behavior:auto;} }

/* section glow helper */
.glow { position:relative; }
.glow::before {
  content:""; position:absolute; left:50%; top:12%; transform:translateX(-50%);
  width:min(760px,80vw); height:420px; border-radius:50%;
  background: radial-gradient(closest-side, rgba(124,92,255,.14), transparent 72%);
  pointer-events:none; z-index:0;
}
.glow.blue::before { background: radial-gradient(closest-side, rgba(59,130,246,.16), transparent 72%); }
.glow > * { position: relative; z-index: 1; }

/* --------------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .price-grid { grid-template-columns: 1fr; }
  .dw-nav .links { display: none; }
  .dw-burger { display: grid; place-items: center; }
  .display { font-size: clamp(2.3rem, 10vw, 3rem); }
}

/* keep bootstrap navbar hidden if any legacy template still emits it */
.navbar.bg-primary { display: none; }