/* =========================================================================
   Jobotics UI/UX Refresh  ·  v1
   Additive layer loaded AFTER styles.min.css. Changes look & feel only —
   no markup or copy changes. Direction: refined professional SaaS / flat,
   brand orange preserved, warm navy for dark sections, Plus Jakarta display.
   Informed by ui-ux-pro-max design intelligence.
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* ---- Tokens ---------------------------------------------------------------- */
:root {
  --font-display: 'Plus Jakarta Sans', 'Montserrat', -apple-system, sans-serif;
  --color-accent: #ED582D;            /* align to brand logo orange */
  --color-accent-600: #d4471f;        /* hover/darker */
  --color-accent-100: #fdeee9;
  --color-navy: #0e1726;
  --color-navy-700: #16213a;
  --color-navy-600: #1e2c48;
  --color-canvas: #f4f6f9;         /* single light background for the whole body */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --shadow-md: 0 6px 16px rgba(15,23,42,.08);
  --shadow-lg: 0 18px 40px rgba(15,23,42,.12);
  --radius-lg: 16px;
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ---- Global polish --------------------------------------------------------- */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; background: var(--color-canvas); }
::selection { background: rgba(237,88,45,.18); }

/* ---- Consistent light canvas ---------------------------------------------- */
/* Kill the white/gray flip: every light section shares one calm background,
   and white cards provide the contrast instead of the section itself. */
.section-white, .section-gray { background: var(--color-canvas); }
/* Inline gray-50 panels (integration strip, stat panel) become true white cards
   so they read as panels on the canvas rather than blending in. */
.section-white [style*="var(--color-gray-50)"],
.section-gray  [style*="var(--color-gray-50)"] {
  background: var(--color-white) !important;
  border: 1px solid var(--color-gray-200);
}

/* Visible keyboard focus (accessibility) */
a:focus-visible, button:focus-visible, .btn:focus-visible,
[tabindex]:focus-visible, input:focus-visible {
  outline: 3px solid rgba(237,88,45,.55);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---- Display typography ---------------------------------------------------- */
.hero-title,
.section-title,
.card-title { font-family: var(--font-display); letter-spacing: -.025em; }

.hero-title { font-weight: 800; line-height: 1.06; }
.section-title { font-weight: 800; font-size: clamp(2rem, 3.6vw, 2.85rem); }
.card-title { font-weight: 700; font-size: 1.3rem; }

/* Section subtitle: calmer measure + weight */
.section-subtitle { font-size: 1.125rem; color: var(--color-gray-600); }

/* Highlight: brand underline flourish instead of flat color only */
.section-title .highlight,
.hero-title .highlight { color: var(--color-accent); position: relative; }
.section-title .highlight::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .06em; height: .14em;
  background: linear-gradient(90deg, rgba(237,88,45,.55), rgba(237,88,45,.15));
  border-radius: 2px;
}

/* ---- Navigation ------------------------------------------------------------ */
.navbar.scrolled, .white-bg-page .navbar {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  box-shadow: 0 1px 0 rgba(15,23,42,.06), 0 6px 20px rgba(15,23,42,.06);
}

/* ---- Buttons: brand-forward, rounder, softer motion ------------------------ */
.btn { border-radius: 10px; padding: .9rem 1.6rem; letter-spacing: -.005em;
       transition: transform .18s var(--ease), box-shadow .18s var(--ease), background-color .18s var(--ease); }

.btn-primary, .navbar .btn-primary { background: var(--color-accent); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary::before { display: none; }               /* drop the black slide-in */
.btn-primary:hover, .navbar .btn-primary:hover {
  background: var(--color-accent-600); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(237,88,45,.28);
}
/* Scrolled nav primary: stay on-brand instead of white/black */
.navbar.scrolled .btn-primary { background: var(--color-accent); color: #fff; border: 0; font-weight: 700; }
.navbar.scrolled .btn-primary:hover { background: var(--color-accent-600); color: #fff; border: 0; }
.nav-links a[href*="demo.jobotics.ai"].btn,
.navbar.scrolled .nav-links a[href*="demo.jobotics.ai"].btn { background: var(--color-navy); color: #fff; }
.nav-links a[href*="demo.jobotics.ai"].btn:hover,
.navbar.scrolled .nav-links a[href*="demo.jobotics.ai"].btn:hover { background: var(--color-navy-600); color: #fff; }

.btn-secondary { border: 1.5px solid rgba(255,255,255,.45); border-radius: 10px; }
.btn-secondary:hover { background: rgba(255,255,255,.12); }

/* ---- Hero ------------------------------------------------------------------ */
.hero-overlay {
  background: linear-gradient(135deg, rgba(14,23,38,.78) 0%, rgba(14,23,38,.62) 45%, rgba(30,44,72,.68) 100%);
}
.hero-bg-image { filter: blur(6px) grayscale(30%) brightness(.42); }
body:not(.white-bg-page) .hero-subtitle { color: rgba(226,232,240,.92); }

/* ---- Cards ----------------------------------------------------------------- */
.card {
  border: 1px solid var(--color-gray-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform .22s var(--ease), box-shadow .22s var(--ease), border-color .22s var(--ease);
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(237,88,45,.35); }
.card::before { width: 3px; background: var(--color-accent); }

.card-link { color: var(--color-accent); font-weight: 600; }
.card-link:hover { color: var(--color-accent-600); }

/* ---- Dark sections: warm navy, not flat black ----------------------------- */
.section-black {
  background: linear-gradient(160deg, var(--color-navy) 0%, var(--color-navy-700) 60%, var(--color-navy-600) 100%);
}
.section-black::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 15% 10%, rgba(237,88,45,.10), transparent 60%);
}
.section-black > .container { position: relative; z-index: 1; }

/* ---- Links ----------------------------------------------------------------- */
.text-accent { color: var(--color-accent); }

/* ---- Tables ---------------------------------------------------------------- */
thead { background: var(--color-navy); }
.table-container { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-sm); border: 1px solid var(--color-gray-200); }

/* ---- Footer ---------------------------------------------------------------- */
.footer { background: var(--color-navy); }

/* ---- Section kicker (available for future use, non-breaking) --------------- */
.eyebrow {
  display: inline-block; font-family: var(--font-display); font-weight: 700;
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--color-accent);
}

/* ---- Motion / accessibility ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .animate-fade-in-up { opacity: 1 !important; transform: none !important; }
}