/* ============================================================
   JEMBA — WordPress-Compatible Landing Page
   ============================================================ */

/* ══════════════════════════════════════════════════════════════
   🔧 IMAGE URLs — REPLACE THESE WITH YOUR WORDPRESS MEDIA URLs
   ══════════════════════════════════════════════════════════════ */
:root {
  /* HERO DASHBOARD IMAGE — Replace with your KPI dashboard screenshot */
  --img-hero-dashboard: url('https://your-site.com/wp-content/uploads/hero-dashboard.png');
  
  /* ABOUT SECTION IMAGE — Replace with your locations/team image */
  --img-about-visual: url('https://your-site.com/wp-content/uploads/about-visual.png');
  
  /* Brand Colors */
  --j-purple: #4C00FF;
  --j-magenta: #C800FF;
  --j-blue: #1B63FF;
  --j-cyan: #00D4AA;
  --j-red: #E63946;
  --j-dark: #0F0F1A;
  --j-dark-mid: #1A1A2E;
  --j-white: #FFFFFF;
  --j-gray-50: #F8F8FC;
  --j-gray-100: #F0F0F5;
  --j-gray-200: #E2E2EA;
  --j-gray-400: #9090A0;
  --j-gray-500: #6A6A80;
  --j-gray-700: #3A3A50;
  --j-accent-gradient: linear-gradient(135deg, #4C00FF 0%, #C800FF 50%, #1B63FF 100%);
  --j-font-main: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --j-font-mono: 'Space Mono', 'Courier New', monospace;
  --j-radius: 16px;
  --j-radius-sm: 8px;
  --j-shadow-card: 0 8px 40px rgba(76,0,255,.08);
  --j-transition: .3s cubic-bezier(.16,1,.3,1);
}

/* ── WordPress Theme Overrides ── */
.jemba-page {
  position: relative;
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  margin-top: -32px !important; /* Remove gap from WP theme */
  padding: 0 !important;
  font-family: var(--j-font-main); color: var(--j-dark);
  background: var(--j-white); overflow-x: hidden;
  -webkit-font-smoothing: antialiased; line-height: 1.6;
}
.jemba-page, .jemba-page * { box-sizing: border-box; }
.jemba-page img { max-width: 100%; height: auto; display: block; }
.jemba-page a { text-decoration: none; color: inherit; }

/* Hide WP page title */
.entry-title, .page-title, .wp-block-post-title, h1.entry-title, h1.page-title,

/* Remove WP container constraints */
.entry-content, .page-content, .post-content, .wp-block-post-content,
.site-content, .content-area, article.page, article.type-page,
.wp-site-blocks > main, main#main, main.site-main {
  max-width: 100% !important; padding: 0 !important; margin: 0 !important; width: 100% !important;
}

/* Hide WP header/footer */
body.page .site-header, body.page .site-footer, body.page #masthead,
body.page #colophon, body.page header.wp-block-template-part,

html { scroll-behavior: smooth; }

/* ── Animations ── */
.j-reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1); }
.j-reveal.j-visible { opacity: 1; transform: translateY(0); }
.j-reveal-d1 { transition-delay: .12s; }
.j-reveal-d2 { transition-delay: .24s; }
.j-reveal-d3 { transition-delay: .36s; }
@keyframes j-float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }
@keyframes j-pulse-ring { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(1.8);opacity:0} }
@keyframes j-gradient-shift { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

.j-container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.j-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 9999;
  padding: 12px 0;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(15,15,26,.06);
  transition: box-shadow var(--j-transition);
}
.j-nav.j-scrolled { box-shadow: 0 2px 24px rgba(15,15,26,.08); }
.j-nav .j-container { display: flex; align-items: center; justify-content: space-between; }
.j-nav-brand { display: flex; align-items: center; }
.j-nav-brand img { height: 36px; width: auto; display: block; }
.j-nav-links { display: flex; gap: 32px; align-items: center; list-style: none; margin: 0; padding: 0; }
.j-nav-links li { list-style: none; }
.j-nav-links li a {
  color: var(--j-gray-500); font-size: 14px; font-weight: 500;
  letter-spacing: .3px; transition: color var(--j-transition); position: relative;
}
.j-nav-links li a::after {
  content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px;
  background: var(--j-accent-gradient); transition: width var(--j-transition);
}
.j-nav-links li a:hover { color: var(--j-dark); }
.j-nav-links li a:hover::after { width: 100%; }
.j-nav-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; border-radius: 100px; border: none;
  background: var(--j-accent-gradient); color: var(--j-white);
  font-family: var(--j-font-main); font-size: 14px; font-weight: 600;
  cursor: pointer; transition: transform var(--j-transition), box-shadow var(--j-transition);
  background-size: 200% 200%; animation: j-gradient-shift 4s ease infinite;
}
.j-nav-cta:hover { transform: translateY(-1px); box-shadow: 0 6px 24px rgba(76,0,255,.3); }
.j-hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.j-hamburger span { width: 22px; height: 2px; background: var(--j-dark); transition: var(--j-transition); border-radius: 2px; }

/* ============================================================
   HERO
   ============================================================ */
.j-hero {
  padding: 120px 0 80px;
  background: linear-gradient(180deg, rgba(76,0,255,.03) 0%, rgba(255,255,255,0) 60%);
  position: relative; overflow: hidden;
}
.j-hero::before {
  content: ''; position: absolute; top: -200px; right: -200px;
  width: 600px; height: 600px; border-radius: 50%;
  background: radial-gradient(circle, rgba(76,0,255,.06) 0%, transparent 70%);
  pointer-events: none;
}
.j-hero-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.j-hero-tag {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 8px;
  background: rgba(76,0,255,.06); border-radius: 100px;
  font-size: 13px; font-weight: 600; color: var(--j-purple); margin-bottom: 24px;
}
.j-hero-tag-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--j-purple); position: relative; }
.j-hero-tag-dot::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1px solid rgba(76,0,255,.3); animation: j-pulse-ring 2s ease-out infinite;
}
.j-hero h1 {
  font-size: clamp(34px, 4.2vw, 54px); font-weight: 800;
  line-height: 1.1; letter-spacing: -1.5px; color: var(--j-dark); margin: 0 0 20px 0;
}
.j-hero h1 em {
  font-style: normal; background: var(--j-accent-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.j-hero-sub { font-size: 18px; color: var(--j-gray-500); line-height: 1.7; max-width: 480px; margin: 0 0 32px 0; }
.j-hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.j-btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; border-radius: 100px; border: none;
  background: var(--j-accent-gradient); color: var(--j-white);
  font-family: var(--j-font-main); font-size: 16px; font-weight: 600;
  cursor: pointer; transition: transform var(--j-transition), box-shadow var(--j-transition);
  background-size: 200% 200%; animation: j-gradient-shift 4s ease infinite;
}
.j-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(76,0,255,.35); }
.j-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 32px; border-radius: 100px;
  border: 1.5px solid var(--j-gray-200); background: var(--j-white);
  color: var(--j-dark); font-family: var(--j-font-main);
  font-size: 16px; font-weight: 600; cursor: pointer;
  transition: border-color var(--j-transition), box-shadow var(--j-transition);
}
.j-btn-secondary:hover { border-color: var(--j-purple); box-shadow: 0 4px 20px rgba(76,0,255,.1); }

/* ============================================================
   HERO DASHBOARD - Embedded ML Dashboard
   ============================================================ */
.j-hero-dashboard {
  animation: j-float 6s ease-in-out infinite;
}
.jd-wrapper {
  display: flex;
  gap: 12px;
  background: #050810;
  border-radius: var(--j-radius);
  padding: 12px;
  box-shadow: 0 20px 60px rgba(15,15,26,.3);
}
.jd-panel {
  background: linear-gradient(170deg, #101a2e 0%, #0b1020 40%, #080d1a 100%);
  border-radius: 10px;
  border: 1px solid rgba(100, 120, 180, 0.12);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 12px;
}
.jd-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(120, 140, 255, 0.2), transparent);
}
.jd-left { flex: 1.2; }
.jd-right { flex: 0.8; }
.jd-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 10px;
}
.jd-header h2 {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #e8ecf4;
  margin: 0;
}
.jd-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(34, 197, 94, 0.35);
  background: rgba(34, 197, 94, 0.08);
  border-radius: 10px;
  padding: 2px 8px;
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #22c55e;
}
.jd-badge-dot {
  width: 5px; height: 5px;
  background: #22c55e;
  border-radius: 50%;
  animation: jd-blink 2s ease-in-out infinite;
}
@keyframes jd-blink { 0%,100%{opacity:1;} 50%{opacity:0.4;} }
.jd-grid4 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 1;
}
.jd-card {
  background: rgba(14, 20, 36, 0.85);
  border: 1px solid rgba(70, 90, 140, 0.15);
  border-radius: 8px;
  padding: 8px;
  display: flex;
  flex-direction: column;
}
.jd-card-top {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 6px;
}
.jd-card-label {
  font-size: 9px;
  font-weight: 600;
  color: #d0d8e8;
}
.jd-card-sub {
  font-size: 8px;
  color: #8b5cf6;
  font-weight: 500;
}
.jd-card-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.jd-chart {
  flex: 1;
  min-height: 50px;
}
.jd-chart svg {
  width: 100%;
  height: 100%;
}
.jd-gauge {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 50px;
}
.jd-gauge svg {
  width: 50px;
  height: auto;
}
.jd-sc-val {
  font-family: 'Space Mono', monospace;
  font-weight: 700;
  font-size: 14px;
}
.jd-green { color: #22c55e; }
.jd-red { color: #ef4444; }
.jd-orange { color: #f97316; }
.jd-bars {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  flex: 1;
  padding: 8px 0;
  gap: 8px;
}
.jd-bar-group {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 45px;
}
.jd-bar {
  width: 8px;
  border-radius: 2px;
}
.jd-vals {
  display: flex;
  justify-content: center;
  gap: 12px;
}
.jd-val {
  font-family: 'Space Mono', monospace;
  font-size: 10px;
  color: #94a3b8;
}
.jd-footer {
  display: flex;
  justify-content: center;
  padding-top: 8px;
  margin-top: auto;
}
.jd-brand {
  font-family: 'DM Sans', sans-serif;
  font-weight: 700;
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 2px;
}
/* Alert Panel */
.jd-alert {
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  border-radius: 8px;
  padding: 10px;
  flex: 1;
}
.jd-alert-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.jd-alert-icon { font-size: 14px; }
.jd-alert-header span:last-child {
  font-weight: 700;
  font-size: 11px;
  color: #ef4444;
}
.jd-alert-msg {
  font-size: 9px;
  color: #94a3b8;
  margin-bottom: 8px;
}
.jd-alert-score {
  display: flex;
  gap: 6px;
  font-size: 10px;
  margin-bottom: 4px;
}
.jd-alert-score span:first-child { color: #64748b; }
.jd-alert-score .jd-red { font-weight: 700; font-size: 12px; }
.jd-alert-time {
  font-size: 8px;
  color: #64748b;
  margin-bottom: 8px;
}
.jd-alert-data {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.jd-alert-card {
  background: rgba(14, 20, 36, 0.6);
  border-radius: 6px;
  padding: 6px 8px;
}
.jd-alert-title {
  font-size: 8px;
  color: #64748b;
  margin-bottom: 4px;
}
.jd-alert-vals {
  display: flex;
  gap: 10px;
  font-family: 'Space Mono', monospace;
  font-size: 9px;
  color: #94a3b8;
}
/* Dashboard responsive */
@media (max-width: 768px) {
  .jd-wrapper { flex-direction: column; }
  .jd-left, .jd-right { flex: none; }
}

/* ============================================================
   STATS BAR
   ============================================================ */
.j-stats { padding: 40px 0; background: var(--j-gray-100); border-top: 1px solid var(--j-gray-200); border-bottom: 1px solid var(--j-gray-200); }
.j-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
.j-stat-num {
  font-size: 36px; font-weight: 800; letter-spacing: -1px;
  background: var(--j-accent-gradient); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  margin: 0;
}
.j-stat-label { font-size: 14px; color: var(--j-gray-500); margin-top: 4px; font-weight: 500; }

/* ============================================================
   ABOUT US
   ============================================================ */
.j-about { padding: 100px 0; }
.j-section-tag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 2px; color: var(--j-purple);
  margin-bottom: 16px; font-family: var(--j-font-mono);
}
.j-section-tag::before { content: ''; width: 24px; height: 2px; background: var(--j-accent-gradient); border-radius: 1px; }
.j-section-title {
  font-size: clamp(28px, 3.5vw, 44px); font-weight: 800;
  line-height: 1.15; letter-spacing: -1px; color: var(--j-dark); margin: 0 0 20px 0;
}
.j-section-title em {
  font-style: normal; background: var(--j-accent-gradient);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.j-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.j-about-text p { font-size: 16px; line-height: 1.8; color: var(--j-gray-500); margin: 0 0 24px 0; }
.j-about-values { display: flex; flex-direction: column; gap: 20px; }
.j-value-item {
  display: flex; align-items: flex-start; gap: 16px; padding: 20px;
  border-radius: var(--j-radius-sm); background: var(--j-gray-100);
  border: 1px solid var(--j-gray-200);
  transition: border-color var(--j-transition), box-shadow var(--j-transition);
}
.j-value-item:hover { border-color: rgba(76,0,255,.2); box-shadow: var(--j-shadow-card); }
.j-value-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px;
  background: var(--j-accent-gradient); display: flex; align-items: center; justify-content: center;
}
.j-value-icon svg { width: 22px; height: 22px; stroke: var(--j-white); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.j-value-title { font-size: 16px; font-weight: 700; color: var(--j-dark); margin: 0 0 4px 0; }
.j-value-desc { font-size: 14px; color: var(--j-gray-500); line-height: 1.6; margin: 0; }

/* ══════════════════════════════════════════════════════════════
   🖼️ ABOUT IMAGE — Replace src with your WordPress media URL
   ══════════════════════════════════════════════════════════════ */
.j-about-image {
  border-radius: var(--j-radius);
  overflow: hidden;
  box-shadow: 0 16px 48px rgba(15,15,26,.12);
}
.j-about-image img {
  width: 100%; height: auto; display: block;
}

/* ============================================================
   4-STEP PROCESS
   ============================================================ */
.j-process {
  padding: 100px 0; background: var(--j-gray-50);
  position: relative; overflow: hidden;
}
.j-process::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: var(--j-gray-200); }
.j-process-header { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.j-process-header p { font-size: 17px; color: var(--j-gray-500); line-height: 1.7; margin: 12px 0 0 0; }
.j-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; }
.j-steps::before {
  content: ''; position: absolute; top: 50px; left: 12.5%; right: 12.5%;
  height: 2px; background: linear-gradient(90deg, var(--j-purple), var(--j-magenta), var(--j-blue));
  z-index: 0; opacity: .3;
}
.j-step {
  position: relative; z-index: 1; text-align: center;
  background: var(--j-white); border-radius: var(--j-radius);
  padding: 28px 16px; border: 1px solid var(--j-gray-200);
  transition: border-color var(--j-transition), box-shadow var(--j-transition), transform var(--j-transition);
}
.j-step:hover { border-color: rgba(76,0,255,.2); box-shadow: var(--j-shadow-card); transform: translateY(-4px); }
.j-step-letter {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--j-accent-gradient);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; font-weight: 800; color: var(--j-white);
  margin: 0 auto 16px; font-family: var(--j-font-mono);
  box-shadow: 0 4px 16px rgba(76,0,255,.25);
}
.j-step-title { font-size: 16px; font-weight: 700; color: var(--j-dark); margin: 0 0 14px 0; }
.j-step-items { display: flex; flex-direction: column; gap: 8px; }
.j-step-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: var(--j-radius-sm);
  background: var(--j-gray-50); border: 1px solid var(--j-gray-200);
  transition: background var(--j-transition), border-color var(--j-transition);
}
.j-step-item:hover { background: rgba(76,0,255,.04); border-color: rgba(76,0,255,.15); }
.j-step-item-icon {
  flex-shrink: 0; width: 32px; height: 32px; border-radius: 6px;
  background: rgba(76,0,255,.08); display: flex; align-items: center; justify-content: center;
}
.j-step-item-icon svg { width: 16px; height: 16px; stroke: var(--j-purple); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.j-step-item-label { font-size: 12px; font-weight: 600; color: var(--j-gray-700); text-align: left; }

/* ============================================================
   PLATFORM
   ============================================================ */
.j-platform { padding: 100px 0; }
.j-platform-header { text-align: center; max-width: 640px; margin: 0 auto 64px; }
.j-platform-header p { font-size: 17px; color: var(--j-gray-500); line-height: 1.7; margin: 12px 0 0 0; }
.j-platform-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.j-platform-card {
  padding: 32px; border-radius: var(--j-radius); background: var(--j-white);
  border: 1px solid var(--j-gray-200); position: relative; overflow: hidden;
  transition: border-color var(--j-transition), box-shadow var(--j-transition), transform var(--j-transition);
}
.j-platform-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--j-accent-gradient); opacity: 0; transition: opacity var(--j-transition);
}
.j-platform-card:hover { border-color: rgba(76,0,255,.15); box-shadow: var(--j-shadow-card); transform: translateY(-3px); }
.j-platform-card:hover::before { opacity: 1; }
.j-platform-card-icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: rgba(76,0,255,.06); display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.j-platform-card-icon svg { width: 26px; height: 26px; stroke: var(--j-purple); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.j-platform-card h3 { font-size: 18px; font-weight: 700; color: var(--j-dark); margin: 0 0 10px 0; }
.j-platform-card p { font-size: 14px; color: var(--j-gray-500); line-height: 1.7; margin: 0; }

/* ============================================================
   RESULTS
   ============================================================ */
.j-results {
  padding: 100px 0; background: var(--j-dark);
  position: relative; overflow: hidden;
}
.j-results::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at 60% 30%, rgba(76,0,255,.12), transparent 60%);
  pointer-events: none;
}
.j-results .j-section-tag { color: var(--j-magenta); }
.j-results .j-section-tag::before { background: linear-gradient(90deg, var(--j-magenta), var(--j-blue)); }
.j-results .j-section-title { color: var(--j-white); }
.j-results-header { text-align: center; max-width: 600px; margin: 0 auto 64px; position: relative; z-index: 1; }
.j-results-header p { font-size: 17px; color: var(--j-gray-400); line-height: 1.7; margin: 12px 0 0 0; }
.j-results-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; position: relative; z-index: 1; }
.j-result-card {
  padding: 32px 24px; border-radius: var(--j-radius);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  text-align: center; transition: border-color var(--j-transition), transform var(--j-transition);
}
.j-result-card:hover { border-color: rgba(200,0,255,.3); transform: translateY(-4px); }
.j-result-num {
  font-size: 40px; font-weight: 800;
  background: var(--j-accent-gradient); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
  margin: 0 0 8px 0; font-family: var(--j-font-mono);
}
.j-result-label { font-size: 14px; color: var(--j-gray-400); line-height: 1.5; margin: 0; }

/* ============================================================
   TESTIMONIAL
   ============================================================ */
.j-testimonial { padding: 80px 0; background: var(--j-gray-100); }
.j-testimonial-inner { max-width: 740px; margin: 0 auto; text-align: center; }
.j-testimonial-quote {
  font-size: 22px; font-weight: 400; line-height: 1.7; color: var(--j-dark);
  font-style: italic; margin: 0 0 24px 0; position: relative; padding: 0 32px;
}
.j-testimonial-quote::before {
  content: '\201C'; position: absolute; top: -16px; left: 0;
  font-size: 64px; font-weight: 800; line-height: 1;
  background: var(--j-accent-gradient); -webkit-background-clip: text;
  -webkit-text-fill-color: transparent; background-clip: text;
}
.j-testimonial-author { font-size: 15px; font-weight: 700; color: var(--j-dark); margin: 0; }
.j-testimonial-role { font-size: 13px; color: var(--j-gray-400); margin: 2px 0 0 0; }

/* ============================================================
   CTA + CONTACT FORM
   ============================================================ */
.j-cta { padding: 100px 0; text-align: center; position: relative; overflow: hidden; }
.j-cta::before {
  content: ''; position: absolute; bottom: -100px; left: 50%; transform: translateX(-50%);
  width: 800px; height: 400px; background: radial-gradient(ellipse, rgba(76,0,255,.06), transparent 70%);
  pointer-events: none;
}
.j-cta .j-section-title { margin: 0 0 16px 0; }
.j-cta > .j-container > p { font-size: 17px; color: var(--j-gray-500); max-width: 500px; margin: 0 auto 32px; line-height: 1.7; }

/* ══════════════════════════════════════════════════════════════
   📋 CONTACT FORM EMBED — Replace the iframe src with your form URL
   Works with: WPForms, Contact Form 7, Gravity Forms, HubSpot, Typeform
   ══════════════════════════════════════════════════════════════ */
.j-contact-form-wrapper {
  max-width: 600px;
  margin: 0 auto;
  background: var(--j-white);
  border-radius: var(--j-radius);
  box-shadow: 0 8px 40px rgba(15,15,26,.08);
  padding: 40px;
  position: relative;
  z-index: 1;
}
.j-contact-form-wrapper iframe {
  width: 100%;
  min-height: 400px;
  border: none;
}
/* If using shortcode instead of iframe, style the container */
.j-contact-form-wrapper form {
  text-align: left;
}

/* Jemba Forms button styling — white text on gradient */
.j-contact-form-wrapper input[type="submit"],
.j-contact-form-wrapper button[type="submit"],
.j-contact-form-wrapper .jemba-submit,
.j-contact-form-wrapper .submit-btn,
.jemba-page input[type="submit"],
.jemba-page button[type="submit"] {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* ============================================================
   FOOTER
   ============================================================ */
.j-footer { padding: 40px 0; background: var(--j-dark); border-top: 1px solid rgba(255,255,255,.06); }
.j-footer .j-container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.j-footer-brand img { height: 28px; width: auto; display: block; }
.j-footer-links { display: flex; gap: 24px; list-style: none; margin: 0; padding: 0; }
.j-footer-links a { font-size: 13px; color: var(--j-gray-400); transition: color var(--j-transition); }
.j-footer-links a:hover { color: var(--j-white); }
.j-footer-copy { font-size: 12px; color: var(--j-gray-500); margin: 0; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 960px) {
  .j-hero-inner { grid-template-columns: 1fr; }
  .j-hero-image { max-width: 500px; margin: 40px auto 0; }
  .j-steps { grid-template-columns: repeat(2, 1fr); }
  .j-steps::before { display: none; }
  .j-platform-grid { grid-template-columns: 1fr 1fr; }
  .j-results-grid { grid-template-columns: repeat(2, 1fr); }
  .j-about-grid { grid-template-columns: 1fr; }
  .j-about-image { max-width: 480px; margin: 40px auto 0; }
}
@media (max-width: 768px) {
  .j-container { padding: 0 20px; }
  .j-nav-links { display: none; }
  .j-hamburger { display: flex; }
  .j-nav-links.j-open {
    display: flex; flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--j-white); padding: 20px 32px;
    border-bottom: 1px solid var(--j-gray-200); box-shadow: 0 8px 24px rgba(0,0,0,.08);
  }
  .j-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .j-steps { grid-template-columns: 1fr; max-width: 360px; margin: 0 auto; }
  .j-platform-grid { grid-template-columns: 1fr; }
  .j-results-grid { grid-template-columns: 1fr 1fr; }
  .j-contact-form-wrapper { padding: 24px; }
}
@media (max-width: 480px) {
  .j-results-grid { grid-template-columns: 1fr; }
  .j-footer .j-container { flex-direction: column; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   WPML LANGUAGE SWITCHER STYLES
   ═══════════════════════════════════════════════════════════════════ */
.j-nav-language {
  display: flex;
  align-items: center;
  margin-left: 16px;
}

.j-nav-language .wpml-ls {
  border: none !important;
  background: transparent !important;
}

.j-nav-language .wpml-ls-legacy-dropdown {
  width: auto;
}

.j-nav-language .wpml-ls-legacy-dropdown a {
  padding: 6px 12px;
  border: 1px solid var(--j-gray-200);
  border-radius: 6px;
  font-size: 13px;
  color: var(--j-gray-500);
  transition: all var(--j-transition);
}

.j-nav-language .wpml-ls-legacy-dropdown a:hover {
  border-color: var(--j-purple);
  color: var(--j-purple);
}

.j-nav-language .wpml-ls-legacy-dropdown .wpml-ls-sub-menu {
  border: 1px solid var(--j-gray-200);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  overflow: hidden;
}

.j-nav-language .wpml-ls-flag {
  width: 20px;
  height: 14px;
  margin-right: 6px;
}

/* Mobile language switcher */
@media (max-width: 768px) {
  .j-nav-language {
    position: absolute;
    top: 12px;
    right: 60px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DROPDOWN MENU STYLES
   ═══════════════════════════════════════════════════════════════════ */
.j-nav-item {
  position: relative;
}

.j-nav-has-dropdown > a {
  display: flex;
  align-items: center;
  gap: 4px;
}

.j-nav-arrow {
  transition: transform var(--j-transition);
}

.j-nav-has-dropdown:hover .j-nav-arrow {
  transform: rotate(180deg);
}

.j-nav-submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--j-white);
  border: 1px solid var(--j-gray-200);
  border-radius: var(--j-radius-sm);
  box-shadow: 0 8px 30px rgba(0,0,0,0.1);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all var(--j-transition);
  z-index: 1000;
  list-style: none;
  margin: 0;
}

.j-nav-has-dropdown:hover > .j-nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.j-nav-subitem {
  list-style: none;
}

.j-nav-sublink {
  display: block;
  padding: 10px 20px;
  color: var(--j-gray-500);
  font-size: 14px;
  font-weight: 500;
  transition: all var(--j-transition);
}

.j-nav-sublink:hover {
  background: var(--j-gray-50);
  color: var(--j-purple);
}

.j-nav-current > a {
  color: var(--j-purple) !important;
}

/* Mobile Dropdown */
@media (max-width: 768px) {
  .j-nav-submenu {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    background: var(--j-gray-50);
    border-radius: 0;
    padding: 0;
    margin: 8px 0;
  }
  
  .j-nav-sublink {
    padding: 8px 24px;
    font-size: 13px;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER MENU STYLES
   ═══════════════════════════════════════════════════════════════════ */
.j-footer-menu {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.j-footer-menu li {
  list-style: none;
}

.j-footer-menu a {
  color: var(--j-gray-500);
  font-size: 14px;
  transition: color var(--j-transition);
}

.j-footer-menu a:hover {
  color: var(--j-purple);
}

@media (max-width: 768px) {
  .j-footer-menu {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   ELEMENTOR COMPATIBILITY - HIDE DUPLICATE FOOTER
   Only show the theme footer (j-theme-footer), hide any footer 
   that is inside Elementor content
   ═══════════════════════════════════════════════════════════════════ */

/* Hide ALL j-footer EXCEPT the theme footer */
.j-footer:not(.j-theme-footer) {
    display: none !important;
}

/* Show ONLY the theme footer (has j-theme-footer class) */
.j-footer.j-theme-footer {
    display: flex !important;
}

/* Hide footers inside main/Elementor content */
.jemba-main .j-footer,
#main .j-footer:not(.j-theme-footer),
.elementor .j-footer,
.elementor-section .j-footer,
[data-elementor-type] .j-footer {
    display: none !important;
}