/* ==========================================================================
   AGENTIC ENGINE WORKSPACE
   A high-fidelity, interactive "Neural Network" visualization
   ========================================================================== */

#agentic-engine {
  position: relative;
  
  /* Auto-scaling framework:
     - MacBook-like aspect ratio (16:10)
     - Constrained to fit nicely in viewport
     - Looks like a device screen */
  
  /* Width: 90% of viewport, capped at 1600px for huge screens */
  width: 90vw;
  max-width: 1600px;
  
  /* Height: 92% of viewport height - fill most of screen */
  height: 92vh;
  max-height: 1100px;
  min-height: 600px;
  
  margin: 0 auto;
  margin-top: 4vh;
  margin-bottom: 4vh;
  
  background: #000000;
  border-radius: clamp(12px, 1.5vw, 24px);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(20px, 2.5vw, 40px);
  color: #ffffff;
  
  /* Scroll animation: opacity only (no scale — scale causes sub-pixel blur) */
  opacity: 0;
  transition: opacity 0.3s ease-out;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* MacBook-style shadow and bezel effect */
  box-shadow: 
    0 25px 80px -15px rgba(0,0,0,0.6),
    0 0 0 1px rgba(255,255,255,0.08),
    inset 0 0 0 1px rgba(255,255,255,0.03);
}

/* Background Canvas for Neural Grid */
#neural-grid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none; /* Mouse interacts via JS event listener on section */
}

/* Main Container */
.engine-container {
  position: relative;
  z-index: 2;
  display: flex;
  width: 100%;
  height: 100%;
  gap: 40px;
  /* Ensure content fits within the scaled view */
}

/* ==========================================================================
   LEFT: CONTROL PANEL (TABS)
   ========================================================================== */

.engine-controls {
  width: 30%; /* Proportional width */
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 0;
}

.control-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 8px #22c55e;
  animation: pulse-green 2s infinite;
}

.control-title {
  font-family: 'Space Grotesk', monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: #fff;
}

.control-tabs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-grow: 1;
  justify-content: center;
}

.control-tab {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.05);
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  text-align: left;
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.control-tab:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.2);
  transform: translateX(5px);
}

.control-tab.active {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
  transform: scale(1.05) translateX(10px); /* Make it pop out */
  z-index: 10;
}

.control-tab.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #FF9900; /* Spark Brand Color */
  box-shadow: 0 0 10px #FF9900;
}

.tab-num {
  font-family: 'Space Grotesk', monospace;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.9);
}

.control-tab.active .tab-num {
  color: #FF9900;
}

.tab-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tab-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 500;
  color: #ffffff;
}

.tab-desc {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.9);
}

.control-status {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 15px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'Space Grotesk', monospace;
  font-size: 10px;
}

.status-line {
  display: flex;
  justify-content: space-between;
}

.status-line .label {
  color: rgba(255, 255, 255, 0.9);
}

.status-line .value {
  color: #ffffff;
}

.text-success { color: #22c55e; }

/* ==========================================================================
   RIGHT: THE SCREEN (VISUALIZER)
   ========================================================================== */

.engine-display {
  flex-grow: 1;
  position: relative;
  perspective: 1000px;
}

.display-glass {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.15);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 20px 50px rgba(0,0,0,0.5),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  transition: transform 0.4s ease;
  cursor: default;
}

.display-glass::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
}

/* ==========================================================================
   ENGINE INTRO ANIMATION
   ========================================================================== */

.engine-intro {
  position: absolute;
  inset: 0;
  background: #000000;
  z-index: 50; /* Above everything else initially */
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.5s ease-out;
  border-radius: inherit; /* Match parent rounded corners */
}

.engine-intro.finished {
  opacity: 0;
  pointer-events: none;
}

.intro-brand-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.intro-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 42px;
  font-weight: 700;
  color: #ffffff;
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.5s ease-out;
}

.intro-text.visible {
  opacity: 1;
  transform: translateY(0);
}

.intro-arrow {
  position: absolute;
  bottom: -15px;
  left: 6%;
  width: 88%;
  height: 20px;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.intro-arrow.visible {
  opacity: 1;
}

.intro-star {
  position: absolute;
  bottom: -15px;
  left: 6%;
  width: 20px;
  height: 20px;
  opacity: 0;
  background: linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  z-index: 10;
}

.intro-star.animate {
  opacity: 1;
  animation: introSlide 1s ease-out forwards;
}

@keyframes introSlide {
  0% { left: 6%; bottom: -15px; opacity: 1; }
  100% { left: 94%; bottom: -15px; opacity: 0; }
}

/* ==========================================================================
   VIDEO WRAPPER UI (Antigravity Style)
   ========================================================================== */

.video-wrapper {
  display: none !important;
}

.engine-intro.finished ~ .video-wrapper {
  opacity: 1;
}

/* Play Button */
.video-control-button {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
  cursor: pointer;
  pointer-events: auto;
}

.video-control-button:hover {
  transform: scale(1.1);
  background: rgba(255, 255, 255, 0.2);
}

.video-control-button .symbol {
  fill: #ffffff;
}

/* Custom Cursor (The Pill) - Hidden */
.custom-cursor {
  display: none !important;
}

.engine-display:hover .custom-cursor {
  display: none !important;
}

.cursor-content {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #ffffff;
  color: #000000;
  padding: 8px 16px;
  border-radius: 50px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.cursor-content .symbol {
  fill: #000000;
  width: 16px;
  height: 16px;
}

.cursor-content .call-to-action {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}

/* Slides */
.slide {
  position: absolute;
  inset: 0;
  padding: 40px;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 10; /* Below video-wrapper (20) and custom-cursor (30) */
}

.slide.active {
  opacity: 1;
  pointer-events: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Visuals inside slides */
.slide-visual {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Flex layout for tab content slides - content flows naturally like hero banner */
.slide-visual[data-type="document"],
.slide-visual[data-type="pipeline"],
.slide-visual[data-type="network"] {
  display: flex;
  flex-direction: column;
}

/* Promote visual stages to own GPU compositing layers for sharp text rendering */
.optimization-stage,
.pipeline-stage,
.network-stage,
.ats-gauge,
.pipeline-counter,
.opt-card,
.job-card,
.culture-card,
.community-chat {
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.slide-content-text {
  position: absolute;
  bottom: 0;
  left: 0;
  max-width: 90%;
  transform: translateZ(0);
  -webkit-font-smoothing: antialiased;
}

/* Content text for slides 1-3: flex child, no absolute positioning */
#slide-1 .slide-content-text,
#slide-2 .slide-content-text,
#slide-3 .slide-content-text {
  position: relative;
  bottom: auto;
  left: auto;
  max-width: 100%;
  flex-shrink: 0;
  transform: translateZ(0);
}

.slide-content-text h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(18px, 2vw, 28px);
  font-weight: 600;
  margin-bottom: clamp(4px, 0.6vw, 8px);
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  color: #ffffff;
  -webkit-text-fill-color: #ffffff;
}

.slide-content-text p {
  color: rgba(255, 255, 255, 0.95);
  font-size: clamp(11px, 1.1vw, 15px);
  line-height: 1.5;
}

/* Mock Visuals - Adjusted Scale */
.mock-doc {
  width: 200px;
  height: 280px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.05);
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%) rotate(-5deg);
  border-radius: 4px;
  padding: 15px;
}

.doc-header {
  height: 30px;
  background: rgba(255,255,255,0.1);
  margin-bottom: 15px;
  border-radius: 2px;
}

.doc-lines .line {
  height: 6px;
  background: rgba(255,255,255,0.1);
  margin-bottom: 8px;
  border-radius: 2px;
}
.w-70 { width: 70%; }
.w-90 { width: 90%; }
.w-60 { width: 60%; }

.keyword-highlight {
  position: absolute;
  width: 80px;
  height: 10px;
  background: rgba(255, 153, 0, 0.3); /* Spark Orange Highlight */
  border: 1px solid rgba(255, 153, 0, 0.6);
  border-radius: 2px;
}

/* Annotations (Tooltips) */
.annotation-point {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #FF9900;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  box-shadow: 0 0 0 4px rgba(255, 153, 0, 0.2);
  transition: all 0.3s ease;
}

.annotation-point:hover {
  transform: scale(1.2);
  box-shadow: 0 0 0 8px rgba(255, 153, 0, 0.4);
}

.annotation-point::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px 12px;
  border-radius: 4px;
  white-space: nowrap;
  font-size: 11px;
  font-family: 'Space Grotesk', monospace;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.annotation-point:hover::after {
  opacity: 1;
}

/* ==========================================================================
   SLIDE 1: TARGETING - D3 RENDERED WORLD MAP
   ========================================================================== */

/* Full-map slide visual - map fills everything above title */
.slide-visual-fullmap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.slide-visual-fullmap .real-map-container {
  position: relative;
  flex: 1;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}

.slide-visual-fullmap .slide-content-text {
  position: relative;
  flex-shrink: 0;
}

.d3-world-map {
  display: block;
}

/* Animated dashed connection lines between cities */
@keyframes flowDash {
  to { stroke-dashoffset: -18; }
}

/* Stats panel - floated on top of map */
.map-stats-panel {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 20px;
  background: rgba(0, 0, 0, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 14px 20px;
  backdrop-filter: blur(10px);
  z-index: 20;
}

.msp-item {
  text-align: center;
}

.msp-value {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #FF9900;
  line-height: 1;
}

.msp-label {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.85);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.msp-divider {
  width: 1px;
  height: 36px;
  background: rgba(255, 255, 255, 0.15);
}

/* Region badge - bottom-left near Precision Targeting */
.region-badge-new {
  position: absolute;
  top: 12px;
  left: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid rgba(255, 153, 0, 0.4);
  padding: 8px 14px;
  border-radius: 8px;
  backdrop-filter: blur(10px);
  z-index: 10;
}

.rb-dot {
  width: 8px;
  height: 8px;
  background: #22c55e;
  border-radius: 50%;
  box-shadow: 0 0 8px #22c55e;
  animation: rbBlink 1.5s ease-in-out infinite;
}

@keyframes rbBlink {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px #22c55e; }
  50% { opacity: 0.6; box-shadow: 0 0 4px #22c55e; }
}

.rb-text {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: #fff;
}

.rb-status {
  font-family: 'Space Grotesk', monospace;
  font-size: 9px;
  color: #22c55e;
  background: rgba(34, 197, 94, 0.15);
  padding: 3px 8px;
  border-radius: 4px;
  letter-spacing: 0.1em;
}

/* ==========================================================================
   SLIDE 2: OPTIMIZATION - RESUME COMPARE
   ========================================================================== */

/* ==========================================================================
   SLIDE 2: OPTIMIZATION - LinkedIn & Resume ATS Transformation
   ========================================================================== */

.optimization-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2vw, 20px);
}

/* Shared card styles */
.opt-card {
  width: clamp(110px, 22vw, 170px);
  background: rgba(20, 20, 25, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden;
  position: relative;
}

.opt-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  overflow: hidden;
  min-width: 0;
}

.opt-card-header.linkedin-header {
  background: #0A66C2;
}

.opt-card-header.resume-header {
  background: rgba(0, 0, 0, 0.4);
}

.opt-li-logo {
  width: 16px;
  height: 16px;
}

.opt-card-label {
  font-family: 'Space Grotesk', monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.9);
  letter-spacing: 0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.opt-card-body {
  padding: clamp(8px, 1.2vw, 14px);
  min-height: clamp(90px, 18vw, 160px);
}

/* LinkedIn card body */
.opt-avatar {
  width: clamp(24px, 4vw, 36px);
  height: clamp(24px, 4vw, 36px);
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255, 153, 0, 0.4), rgba(255, 102, 0, 0.2));
  border: 2px solid rgba(255, 153, 0, 0.5);
  margin-bottom: 10px;
}

.opt-name-line {
  height: 10px;
  width: 75%;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 3px;
  margin-bottom: 6px;
}

.opt-headline-line {
  height: 7px;
  width: 55%;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 2px;
  margin-bottom: 14px;
}

.opt-skills {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.opt-skill {
  font-family: 'Space Grotesk', monospace;
  font-size: 7px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  color: rgba(255, 255, 255, 0.7);
}

.opt-skill.highlight {
  background: rgba(255, 153, 0, 0.2);
  border-color: rgba(255, 153, 0, 0.3);
  color: #FF9900;
}

/* Resume card body */
.opt-doc-line {
  height: 5px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 2px;
  margin-bottom: 4px;
}

.opt-doc-line.heading {
  height: 7px;
  background: rgba(255, 255, 255, 0.2);
  margin-bottom: 6px;
  margin-top: 4px;
}

.opt-doc-line.kw {
  background: linear-gradient(90deg, rgba(255, 153, 0, 0.35), rgba(255, 153, 0, 0.1));
}

.opt-doc-line.w40 { width: 40%; }
.opt-doc-line.w60 { width: 60%; }
.opt-doc-line.w70 { width: 70%; }
.opt-doc-line.w75 { width: 75%; }
.opt-doc-line.w80 { width: 80%; }
.opt-doc-line.w85 { width: 85%; }
.opt-doc-line.w90 { width: 90%; }
.opt-doc-line.w95 { width: 95%; }

.opt-doc-section {
  margin-bottom: 6px;
}

.opt-kw-badges {
  display: flex;
  gap: 4px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.opt-kw {
  font-family: 'Space Grotesk', monospace;
  font-size: 7px;
  padding: 2px 5px;
  background: rgba(255, 153, 0, 0.2);
  border: 1px solid rgba(255, 153, 0, 0.3);
  border-radius: 3px;
  color: #FF9900;
  opacity: 0;
  animation: kwFadeIn 0.4s ease forwards;
}

.slide.active .opt-kw:nth-child(1) { animation-delay: 1.2s; }
.slide.active .opt-kw:nth-child(2) { animation-delay: 1.5s; }
.slide.active .opt-kw:nth-child(3) { animation-delay: 1.8s; }
.slide.active .opt-kw:nth-child(4) { animation-delay: 2.1s; }

@keyframes kwFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Scan line overlay */
.opt-scan-line {
  position: absolute;
  top: -2px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #FF9900, transparent);
  box-shadow: 0 0 15px rgba(255, 153, 0, 0.6);
  opacity: 0;
}

.slide.active .opt-scan-line {
  animation: scanLine 2.5s ease-in-out infinite;
}

@keyframes scanLine {
  0% { top: -2px; opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { top: calc(100% + 2px); opacity: 0; }
}

/* Transform center */
.opt-transform {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(4px, 0.7vw, 8px);
  position: relative;
  width: clamp(40px, 7vw, 60px);
}

.opt-core {
  width: clamp(30px, 5vw, 44px);
  height: clamp(30px, 5vw, 44px);
  background: rgba(99, 102, 241, 0.1);
  border: 1px solid rgba(99, 102, 241, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.opt-core svg {
  width: 20px;
  height: 20px;
}

.opt-pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border: 2px solid rgba(99, 102, 241, 0.4);
  border-radius: 50%;
  animation: optPulse 2s ease-out infinite;
}

.opt-pulse-ring.delay {
  animation-delay: 1s;
}

@keyframes optPulse {
  0% { width: 44px; height: 44px; opacity: 1; }
  100% { width: 80px; height: 80px; opacity: 0; }
}

.opt-label {
  font-family: 'Space Grotesk', monospace;
  font-size: 8px;
  color: #ffffff;
  letter-spacing: 0.15em;
  text-align: center;
}

.opt-arrows {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 120%;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}

.opt-arrow {
  display: block;
  width: 16px;
  height: 2px;
  background: rgba(255, 153, 0, 0.5);
  position: relative;
}

.opt-arrow.left { transform: translateX(-8px); }
.opt-arrow.right { transform: translateX(8px); }

.opt-arrow::after {
  content: '';
  position: absolute;
  right: -1px;
  top: -3px;
  border: 4px solid transparent;
  border-left: 5px solid rgba(255, 153, 0, 0.5);
}

.opt-arrow.left::after {
  right: auto;
  left: -1px;
  border-left: none;
  border-right: 5px solid rgba(255, 153, 0, 0.5);
}

/* ATS Score Gauge */
.ats-gauge {
  position: relative;
  align-self: center;
  flex-shrink: 0;
  margin: clamp(8px, 1.5vw, 15px) 0;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  background: rgba(20, 20, 25, 0.9);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: 10px;
  padding: clamp(6px, 1vw, 10px) clamp(10px, 1.5vw, 18px);
  width: clamp(200px, 70%, 300px);
}

.ats-gauge-label {
  display: flex;
  align-items: center;
  gap: 6px;
}

.ats-gauge-icon {
  color: #22c55e;
  font-size: 14px;
}

.ats-gauge-text {
  font-family: 'Space Grotesk', monospace;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.7);
  letter-spacing: 0.1em;
}

.ats-gauge-bar {
  flex: 1;
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  overflow: hidden;
}

.ats-gauge-fill {
  height: 100%;
  width: 32%;
  background: linear-gradient(90deg, #ef4444, #FF9900, #22c55e);
  border-radius: 3px;
  transition: width 2s ease-out;
}

.slide.active .ats-gauge-fill {
  width: 98%;
}

.ats-gauge-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(14px, 1.6vw, 18px);
  font-weight: 700;
  color: #22c55e;
  min-width: 36px;
  text-align: right;
}

/* Reuse doc-dot from map slide */
.doc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.doc-dot.red { background: #ff5f57; }
.doc-dot.yellow { background: #ffbd2e; }
.doc-dot.green { background: #28c940; }

/* LinkedIn card glow effect */
.linkedin-card {
  border-color: rgba(10, 102, 194, 0.3);
  box-shadow: 0 0 25px rgba(10, 102, 194, 0.1);
}

.resume-card {
  border-color: rgba(255, 153, 0, 0.3);
  box-shadow: 0 0 25px rgba(255, 153, 0, 0.1);
}

/* ==========================================================================
   SLIDE 3: APPLICATION - Job Scraping Pipeline
   ========================================================================== */

.pipeline-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 1.5vw, 16px);
}

/* Source Platforms */
.pipeline-sources {
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1vw, 10px);
  width: clamp(80px, 15vw, 120px);
}

.pipeline-src {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  opacity: 0;
}

.slide.active .pipeline-src {
  animation: srcFadeIn 0.4s ease forwards;
  animation-delay: calc(var(--i) * 0.15s);
}

@keyframes srcFadeIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.src-icon {
  width: clamp(22px, 3.5vw, 28px);
  height: clamp(22px, 3.5vw, 28px);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(10px, 1vw, 12px);
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.src-icon.linkedin-bg { background: #0A66C2; }
.src-icon.indeed-bg { background: #2164f3; }
.src-icon.glassdoor-bg { background: #0caa41; }
.src-icon.careers-bg { background: #6f42c1; }

.src-logo {
  width: clamp(14px, 2vw, 18px);
  height: clamp(14px, 2vw, 18px);
  display: block;
}

.src-name {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  white-space: nowrap;
}

.src-flow-line {
  position: absolute;
  right: -20px;
  top: 50%;
  width: 20px;
  height: 2px;
  background: rgba(255, 153, 0, 0.3);
  overflow: hidden;
}

.src-flow-line::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 100%;
  background: #FF9900;
  border-radius: 1px;
  animation: flowDot 1.2s linear infinite;
  animation-delay: calc(var(--i) * 0.3s);
}

@keyframes flowDot {
  0% { left: -8px; }
  100% { left: 100%; }
}

/* AI Processing Core */
.pipeline-core {
  position: relative;
  width: clamp(45px, 8vw, 70px);
  height: clamp(45px, 8vw, 70px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.core-ring {
  position: absolute;
  inset: 0;
  border: 2px solid rgba(255, 153, 0, 0.3);
  border-radius: 50%;
  animation: coreRotate 4s linear infinite;
}

.core-ring.ring-1 {
  border-top-color: #FF9900;
  border-right-color: #FF9900;
}

.core-ring.ring-2 {
  inset: 6px;
  animation-direction: reverse;
  animation-duration: 3s;
  border-bottom-color: #FF9900;
}

@keyframes coreRotate {
  to { transform: rotate(360deg); }
}

.core-center {
  width: clamp(26px, 4.5vw, 36px);
  height: clamp(26px, 4.5vw, 36px);
  background: rgba(99, 102, 241, 0.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

.core-center svg {
  width: 18px;
  height: 18px;
}

/* Pipeline star - matches header brand star, continuously rotating */
.pipeline-star {
  width: clamp(16px, 2.8vw, 22px) !important;
  height: clamp(16px, 2.8vw, 22px) !important;
  animation: pipelineStarSpin 3s linear infinite !important;
  filter: drop-shadow(0 0 4px rgba(236, 72, 153, 0.5)) drop-shadow(0 0 8px rgba(99, 102, 241, 0.3));
}

@keyframes pipelineStarSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.core-label {
  position: absolute;
  bottom: -16px;
  font-family: 'Space Grotesk', monospace;
  font-size: 7px;
  color: #ffffff;
  letter-spacing: 0.15em;
  white-space: nowrap;
}

/* Output Job Cards */
.pipeline-output {
  display: flex;
  flex-direction: column;
  gap: clamp(4px, 0.5vw, 6px);
  width: clamp(100px, 18vw, 150px);
}

.job-card {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 10px;
  background: rgba(20, 20, 25, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  opacity: 0;
}

.job-logo {
  width: clamp(16px, 2.5vw, 20px);
  height: clamp(16px, 2.5vw, 20px);
  border-radius: 4px;
  background: var(--jc, #555);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 3px;
}

.job-logo svg {
  width: 100%;
  height: 100%;
  display: block;
}

.slide.active .job-card {
  animation: cardSlideIn 0.4s ease forwards;
  animation-delay: calc(0.6s + var(--j) * 0.2s);
}

@keyframes cardSlideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

.job-role {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 9px;
  font-weight: 600;
  color: #fff;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.job-company {
  font-size: 8px;
  color: rgba(255, 255, 255, 0.5);
}

.job-status {
  font-family: 'Space Grotesk', monospace;
  font-size: 7px;
  font-weight: 600;
  color: #22c55e;
  white-space: nowrap;
}

.job-status.pending {
  color: #FF9900;
}

/* Unlimited Counter Bar */
.pipeline-counter {
  position: relative;
  align-self: center;
  flex-shrink: 0;
  margin: clamp(8px, 1.5vw, 15px) 0;
  display: flex;
  align-items: center;
  gap: clamp(8px, 1vw, 12px);
  background: rgba(20, 20, 25, 0.9);
  border: 1px solid rgba(255, 153, 0, 0.3);
  border-radius: 10px;
  padding: clamp(6px, 1vw, 10px) clamp(10px, 1.5vw, 18px);
  width: clamp(230px, 75%, 340px);
}

.counter-infinity {
  font-size: clamp(16px, 2vw, 22px);
  color: #FF9900;
  line-height: 1;
}

.counter-label {
  font-family: 'Space Grotesk', monospace;
  font-size: 9px;
  color: #FF9900;
  letter-spacing: 0.08em;
  flex: 1;
}

.counter-live {
  display: flex;
  align-items: center;
  gap: 6px;
}

.counter-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 8px #22c55e;
  animation: livePulse 1.5s ease-in-out infinite;
}

@keyframes livePulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.counter-value {
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(12px, 1.4vw, 16px);
  font-weight: 700;
  color: #fff;
}

.counter-unit {
  font-size: 9px;
  color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   SLIDE 4: TIPS & INSIGHTS - Community Network
   ========================================================================== */

.network-stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 1vw, 10px);
}

/* Network Graph */
.network-graph {
  flex: 1;
  position: relative;
  min-height: 0;
}

.net-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.net-line {
  stroke: rgba(255, 153, 0, 0.2);
  stroke-width: 0.3;
  stroke-dasharray: 2 2;
  animation: netLinePulse 3s ease-in-out infinite;
}

.net-line.dim {
  stroke: rgba(255, 255, 255, 0.06);
  stroke-width: 0.2;
  stroke-dasharray: 1 3;
  animation: none;
}

@keyframes netLinePulse {
  0%, 100% { stroke-opacity: 0.4; }
  50% { stroke-opacity: 1; }
}

/* Network Nodes */
.net-node {
  position: absolute;
  left: var(--nx);
  top: var(--ny);
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: 2;
}

.slide.active .net-node {
  animation: nodeAppear 0.5s ease forwards;
  animation-delay: calc(0.1s * var(--i, 0));
}

@keyframes nodeAppear {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.net-node-dot {
  width: clamp(22px, 3.5vw, 30px);
  height: clamp(22px, 3.5vw, 30px);
  border-radius: 50%;
  background: var(--nc, rgba(255, 255, 255, 0.15));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.15);
  animation: nodeFloat 3s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 0.4s);
}

@keyframes nodeFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.net-label {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 8px;
  color: rgba(255, 255, 255, 0.7);
  white-space: nowrap;
}

/* YOU center node */
.you-node .net-node-dot,
.you-dot {
  width: clamp(28px, 4vw, 36px);
  height: clamp(28px, 4vw, 36px);
  background: rgba(34, 197, 94, 0.25);
  border-color: #22c55e;
  color: #22c55e;
  font-size: 10px;
  box-shadow: 0 0 20px rgba(34, 197, 94, 0.3);
}

.net-glow {
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  border: 2px solid rgba(34, 197, 94, 0.3);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: youGlow 2s ease-out infinite;
}

@keyframes youGlow {
  0% { width: 36px; height: 36px; opacity: 1; }
  100% { width: 60px; height: 60px; opacity: 0; }
}

/* Network Info Cards */
.network-cards {
  display: flex;
  gap: clamp(6px, 1vw, 10px);
  flex-shrink: 0;
  min-height: 0;
  overflow: hidden;
}

.culture-card {
  flex: 1;
  min-width: 0;
  background: rgba(20, 20, 25, 0.9);
  border: 1px solid rgba(255, 153, 0, 0.2);
  border-radius: 8px;
  padding: clamp(6px, 1vw, 10px) clamp(8px, 1.2vw, 12px);
}

.culture-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.culture-icon {
  font-size: 14px;
  display: flex;
  align-items: center;
  line-height: 1;
}

.culture-company {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #FF9900;
}

.culture-tip {
  font-size: clamp(8px, 0.8vw, 9px);
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

/* Community Chat Card */
.community-chat {
  flex: 1;
  min-width: 0;
  background: rgba(20, 20, 25, 0.9);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: clamp(6px, 1vw, 10px) clamp(8px, 1.2vw, 12px);
}

.chat-header {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.chat-icon {
  font-size: 12px;
  display: flex;
  align-items: center;
  line-height: 1;
  color: rgba(255, 255, 255, 0.7);
}

.chat-title {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  flex: 1;
}

.chat-badge {
  font-family: 'Space Grotesk', monospace;
  font-size: 7px;
  padding: 2px 6px;
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border-radius: 3px;
}

.chat-msg {
  display: flex;
  gap: 8px;
  margin-bottom: 6px;
  opacity: 0;
}

.slide.active .chat-msg:nth-child(2) {
  animation: chatIn 0.4s ease forwards 0.8s;
}

.slide.active .chat-msg:nth-child(3) {
  animation: chatIn 0.4s ease forwards 1.4s;
}

@keyframes chatIn {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

.chat-avatar {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ac, rgba(255, 255, 255, 0.2));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
}

.chat-bubble {
  font-size: clamp(7px, 0.7vw, 8px);
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 6px;
  padding: clamp(3px, 0.5vw, 5px) clamp(5px, 0.7vw, 8px);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Animation Keyframes */
@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.4); }
  70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS - Auto-scaling framework
   ========================================================================== */

/* Extra Large Screens (4K, Projectors) */
@media (min-width: 2560px) {
  #agentic-engine {
    max-width: 2200px;
    max-height: 1300px;
  }
  
  .slide-content-text h3 {
    font-size: 42px;
  }
  
  .slide-content-text p {
    font-size: 18px;
  }
  
  .tab-name {
    font-size: 20px;
  }
}

/* Large Screens */
@media (max-width: 1440px) {
  #agentic-engine {
    width: 92vw;
    height: 90vh;
  }
}

/* Medium Screens (Laptops) */
@media (max-width: 1200px) {
  #agentic-engine {
    width: 94vw;
    height: 88vh;
    padding: clamp(15px, 2vw, 30px);
  }

  .engine-controls {
    width: 35%;
  }

  .tab-name {
    font-size: 14px;
  }

  .tab-desc {
    font-size: 10px;
  }
}

/* Tablets */
@media (max-width: 1024px) {
  #agentic-engine {
    width: 90vw;
    height: auto; /* Let aspect-ratio control height */
    aspect-ratio: 4 / 3;
    min-height: 450px;
    max-height: 80vh;
    padding: 20px;
    margin-top: 3vh;
    margin-bottom: 3vh;
  }

  .engine-container {
    flex-direction: column;
    height: 100%;
    gap: 15px;
  }
  
  .engine-controls {
    width: 100%;
    order: 2;
    flex-shrink: 0;
  }
  
  .control-header, .control-status {
    display: none; 
  }

  .control-tabs {
    flex-direction: row;
    overflow-x: auto;
    padding-bottom: 10px;
    gap: 8px;
    justify-content: flex-start;
  }

  .control-tab {
    min-width: 140px;
    padding: 12px;
    flex-shrink: 0;
  }

  .engine-display {
    flex-grow: 1;
    min-height: 300px;
    order: 1;
  }

  /* Ensure pipeline/application elements are visible on tablet/mobile
     without relying on CSS animations that may not fire */
  .slide.active .pipeline-src,
  .slide.active .job-card {
    opacity: 1 !important;
    transform: translateX(0) !important;
  }

  .slide.active .opt-kw {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }

  .slide.active .opt-scan-line {
    opacity: 1;
  }
}

/* Mobile Phones */
@media (max-width: 768px) {
  #agentic-engine {
    width: 94vw;
    height: auto; /* Let aspect-ratio control height */
    aspect-ratio: 3 / 4; /* Portrait orientation for mobile */
    max-height: 85vh;
    border-radius: 16px;
    padding: 15px;
  }

  .control-tab {
    min-width: 120px;
    padding: 10px;
    gap: 10px;
  }

  .tab-num {
    font-size: 10px;
  }

  .tab-name {
    font-size: 13px;
  }

  .tab-desc {
    display: none;
  }

  .engine-display {
    min-height: 250px;
  }

  .slide {
    padding: 15px;
  }

  .annotation-point {
    width: 8px;
    height: 8px;
  }

  /* Map stats panel - scale down on mobile */
  .map-stats-panel {
    top: 8px;
    right: 8px;
    gap: 12px;
    padding: 8px 12px;
    border-radius: 8px;
  }

  .msp-value {
    font-size: 16px;
  }

  .msp-label {
    font-size: 8px;
  }

  .msp-divider {
    height: 24px;
  }

  /* Region badge - scale down */
  .region-badge-new {
    gap: 6px;
    padding: 5px 10px;
    border-radius: 6px;
  }

  .rb-text {
    font-size: 10px;
  }

  .rb-status {
    font-size: 7px;
    padding: 2px 6px;
  }

  .rb-dot {
    width: 6px;
    height: 6px;
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  #agentic-engine {
    width: 96vw;
    height: auto;
    aspect-ratio: 9 / 14;
    border-radius: 12px;
    padding: 10px;
  }

  .control-tab {
    min-width: 100px;
    padding: 8px;
  }

  .display-glass {
    border-radius: 12px;
  }

  .slide {
    padding: 10px;
  }

  /* Map stats - even smaller on tiny screens */
  .map-stats-panel {
    top: 5px;
    right: 5px;
    gap: 8px;
    padding: 6px 8px;
  }

  .msp-value {
    font-size: 13px;
  }

  .msp-label {
    font-size: 7px;
  }

  .msp-divider {
    height: 18px;
  }

  /* Region badge */
  .region-badge-new {
    padding: 4px 8px;
    gap: 4px;
  }

  .rb-text {
    font-size: 9px;
  }

  .rb-status {
    font-size: 6px;
  }
}

/* ==========================================================================
   COMPANY LOGO NODES - Inline SVG brand logos
   ========================================================================== */

.net-logo {
  width: clamp(14px, 2vw, 20px);
  height: clamp(14px, 2vw, 20px);
  display: block;
  flex-shrink: 0;
}

/* ==========================================================================
   EXPAND/COLLAPSE CARDS - Desktop: always visible, Mobile: collapsible
   ========================================================================== */

/* Desktop: expand icon hidden, body always visible */
.card-expand-icon {
  display: none;
}

/* Mobile: collapsible cards */
@media (max-width: 768px) {
  /* Allow dropdowns to extend beyond the glass boundary */
  .display-glass {
    overflow: visible;
  }

  /* Keep inactive slides hidden via opacity (not overflow) */
  .slide {
    overflow: visible;
  }

  /* Network stage needs z-index above slide-content-text so expanded
     card dropdowns (which overflow below) aren't hidden behind the text */
  .network-stage {
    z-index: 10;
  }

  .network-cards {
    flex-direction: column;
    gap: 6px;
    position: relative;
    z-index: 20;
    overflow: visible;
  }

  .culture-card,
  .community-chat {
    border-radius: 8px;
    position: relative;
  }

  .card-expanded {
    z-index: 30;
  }

  /* Keep text below expanded card dropdowns */
  .slide-content-text {
    position: relative;
    z-index: 1;
  }

  .culture-header,
  .chat-header {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    margin-bottom: 0;
  }

  .card-expand-icon {
    display: block;
    margin-left: auto;
    width: 16px;
    height: 16px;
    position: relative;
    flex-shrink: 0;
  }

  .card-expand-icon::before,
  .card-expand-icon::after {
    content: '';
    position: absolute;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 1px;
    transition: transform 0.3s ease;
  }

  /* Horizontal bar */
  .card-expand-icon::before {
    width: 10px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  /* Vertical bar (rotates to 0 when expanded) */
  .card-expand-icon::after {
    width: 2px;
    height: 10px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .card-expanded .card-expand-icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Expand body drops down as overlay — does NOT push layout */
  .card-expand-body {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 0;
    overflow: hidden;
    background: rgba(20, 20, 25, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: none;
    border-radius: 0 0 8px 8px;
    z-index: 10;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 12px;
  }

  .card-expanded .card-expand-body {
    max-height: 200px;
    padding: 10px 12px;
  }

  /* Ensure chat messages show when expanded */
  .card-expanded .chat-msg {
    opacity: 1;
  }

  /* Optimization card - prevent header text cutoff on small screens */
  .opt-card-header .doc-dot {
    flex-shrink: 0;
  }

  .resume-card .opt-card-label {
    font-size: 7px;
  }
}