/* ============================================
   AGENTIC AI PAGE - Specific Styles
   ============================================ */

/* PAGE HERO */
.page-hero { 
  background: var(--navy); 
  padding: 120px 2rem 80px; 
  position: relative; 
  overflow: hidden; 
}

.page-hero-grid { 
  position: absolute; 
  inset: 0; 
  background-image: linear-gradient(rgba(246,173,85,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(246,173,85,0.03) 1px, transparent 1px); 
  background-size: 64px 64px; 
}

.hero-glow-amber { 
  position: absolute; 
  width: 700px; 
  height: 700px; 
  border-radius: 50%; 
  background: radial-gradient(circle, rgba(246,173,85,0.08) 0%, rgba(0,201,167,0.05) 40%, transparent 70%); 
  top: -200px; 
  right: -100px; 
  pointer-events: none; 
}

.page-hero-inner { 
  position: relative; 
  max-width: 1200px; 
  margin: 0 auto; 
}

.page-badge { 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  background: rgba(246,173,85,0.12); 
  border: 1px solid rgba(246,173,85,0.25); 
  color: var(--amber); 
  font-size: 12px; 
  font-weight: 500; 
  letter-spacing: 0.8px; 
  text-transform: uppercase; 
  padding: 5px 14px; 
  border-radius: 100px; 
  margin-bottom: 1.5rem; 
}

.page-badge::before { 
  content: ''; 
  width: 6px; 
  height: 6px; 
  border-radius: 50%; 
  background: var(--amber); 
  animation: pulse 2s infinite; 
}

@keyframes pulse { 
  0%, 100% { opacity:1; transform:scale(1); } 
  50% { opacity:0.4; transform:scale(1.4); } 
}

.page-hero h1 { 
  font-family: var(--font-display); 
  font-size: clamp(2.4rem, 4.5vw, 3.5rem); 
  font-weight: 400; 
  line-height: 1.12; 
  color: white; 
  margin-bottom: 1.25rem; 
  max-width: 780px; 
}

.page-hero h1 em { 
  font-style: italic; 
  color: var(--amber); 
}

.page-hero-sub { 
  font-size: 18px; 
  color: rgba(255,255,255,0.6); 
  line-height: 1.7; 
  max-width: 640px; 
  font-weight: 300; 
  margin-bottom: 2.5rem; 
}

.hero-actions { 
  display: flex; 
  gap: 1rem; 
  flex-wrap: wrap; 
}

.btn-primary { 
  background: var(--teal); 
  color: var(--navy); 
  font-weight: 600; 
  font-size: 15px; 
  padding: 12px 28px; 
  border-radius: 10px; 
  text-decoration: none; 
  display: inline-flex; 
  align-items: center; 
  gap: 8px; 
  transition: all 0.2s; 
}

.btn-primary:hover { 
  background: #00e0bb; 
  transform: translateY(-2px); 
  box-shadow: 0 8px 24px rgba(0,201,167,0.3); 
}

.btn-outline { 
  background: transparent; 
  color: rgba(255,255,255,0.85); 
  border: 1.5px solid rgba(255,255,255,0.2); 
  font-weight: 500; 
  font-size: 15px; 
  padding: 12px 28px; 
  border-radius: 10px; 
  text-decoration: none; 
  transition: all 0.2s; 
}

.btn-outline:hover { 
  border-color: rgba(255,255,255,0.5); 
  color: white; 
}

/* SECTIONS */
section { 
  padding: 80px 2rem; 
}

.section-inner { 
  max-width: 1200px; 
  margin: 0 auto; 
}

.section-label { 
  font-size: 12px; 
  font-weight: 600; 
  letter-spacing: 1.2px; 
  text-transform: uppercase; 
  color: var(--amber); 
  margin-bottom: 0.75rem; 
}

.section-label.teal { 
  color: var(--teal); 
}

.section-title { 
  font-family: var(--font-display); 
  font-size: clamp(2rem, 3.5vw, 2.8rem); 
  font-weight: 400; 
  color: var(--gray-800); 
  line-height: 1.2; 
  margin-bottom: 1rem; 
}

.section-title em { 
  font-style: italic; 
  color: var(--blue); 
}

.section-sub { 
  font-size: 17px; 
  color: var(--gray-600); 
  line-height: 1.7; 
  max-width: 640px; 
  margin-bottom: 3rem; 
}

.dark-section { 
  background: var(--navy); 
}

.dark-section .section-title { 
  color: white; 
}

.dark-section .section-title em { 
  color: var(--amber); 
}

.dark-section .section-sub { 
  color: rgba(255,255,255,0.6); 
}

.alt-section { 
  background: var(--off-white); 
}

/* WHAT IS AGENTIC */
.concept-split { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 4rem; 
  align-items: center; 
}

.concept-text h3 { 
  font-family: var(--font-display); 
  font-size: 1.6rem; 
  margin-bottom: 1rem; 
  color: var(--gray-800); 
}

.concept-text p { 
  font-size: 15.5px; 
  color: var(--gray-600); 
  line-height: 1.7; 
  margin-bottom: 1rem; 
}

.vs-comparison { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 1rem; 
}

.vs-card { 
  padding: 1.5rem; 
  border-radius: var(--radius); 
}

.vs-card.old { 
  background: var(--gray-100); 
  border: 1.5px solid var(--gray-200); 
}

.vs-card.new { 
  background: rgba(246,173,85,0.08); 
  border: 1.5px solid rgba(246,173,85,0.3); 
}

.vs-label { 
  font-size: 11px; 
  font-weight: 600; 
  letter-spacing: 0.8px; 
  text-transform: uppercase; 
  margin-bottom: 0.75rem; 
}

.vs-card.old .vs-label { 
  color: var(--gray-400); 
}

.vs-card.new .vs-label { 
  color: var(--amber); 
}

.vs-card ul { 
  list-style: none; 
}

.vs-card ul li { 
  font-size: 13.5px; 
  padding: 5px 0; 
  border-bottom: 1px solid rgba(0,0,0,0.05); 
  display: flex; 
  align-items: flex-start; 
  gap: 8px; 
}

.vs-card ul li::before { 
  font-size: 14px; 
  flex-shrink: 0; 
  margin-top: 1px; 
}

.vs-card.old ul li { 
  color: var(--gray-600); 
}

.vs-card.old ul li::before { 
  content: '✗'; 
  color: var(--gray-400); 
}

.vs-card.new ul li { 
  color: var(--gray-800); 
}

.vs-card.new ul li::before { 
  content: '✓'; 
  color: var(--amber); 
  font-weight: 700; 
}

/* AGENT WORKFLOW DIAGRAM */
.agent-flow { 
  display: grid; 
  grid-template-columns: repeat(5, 1fr); 
  gap: 0; 
  margin-top: 2.5rem; 
  position: relative; 
}

.agent-flow::before { 
  content: ''; 
  position: absolute; 
  top: 36px; 
  left: 10%; 
  right: 10%; 
  height: 2px; 
  background: linear-gradient(90deg, transparent, rgba(246,173,85,0.4), rgba(0,201,167,0.4), rgba(246,173,85,0.4), transparent); 
  z-index: 0; 
}

.flow-step { 
  position: relative; 
  z-index: 1; 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  text-align: center; 
  padding: 0 0.5rem; 
}

.flow-icon { 
  width: 72px; 
  height: 72px; 
  border-radius: 50%; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 26px; 
  margin-bottom: 1rem; 
  border: 3px solid; 
}

.flow-icon.s1 { 
  background: rgba(43,108,176,0.12); 
  border-color: rgba(43,108,176,0.3); 
}

.flow-icon.s2 { 
  background: rgba(246,173,85,0.12); 
  border-color: rgba(246,173,85,0.35); 
}

.flow-icon.s3 { 
  background: rgba(0,201,167,0.12); 
  border-color: rgba(0,201,167,0.3); 
}

.flow-icon.s4 { 
  background: rgba(246,173,85,0.12); 
  border-color: rgba(246,173,85,0.35); 
}

.flow-icon.s5 { 
  background: rgba(43,108,176,0.12); 
  border-color: rgba(43,108,176,0.3); 
}

.flow-step h4 { 
  font-size: 13px; 
  font-weight: 600; 
  color: white; 
  margin-bottom: 0.4rem; 
}

.flow-step p { 
  font-size: 12px; 
  color: rgba(255,255,255,0.5); 
  line-height: 1.5; 
}

/* AGENT CARDS */
.agents-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 1.5rem; 
}

.agent-card { 
  background: white; 
  border: 1.5px solid var(--gray-200); 
  border-radius: var(--radius-lg); 
  padding: 2rem; 
  transition: all 0.25s; 
  position: relative; 
  overflow: hidden; 
}

.agent-card::before { 
  content: ''; 
  position: absolute; 
  top: 0; 
  left: 0; 
  right: 0; 
  height: 3px; 
  background: linear-gradient(90deg, var(--amber), var(--teal)); 
  opacity: 0; 
  transition: opacity 0.25s; 
}

.agent-card:hover { 
  border-color: rgba(246,173,85,0.4); 
  box-shadow: var(--shadow-card); 
  transform: translateY(-3px); 
}

.agent-card:hover::before { 
  opacity: 1; 
}

.agent-emoji { 
  font-size: 32px; 
  margin-bottom: 1rem; 
  display: block; 
}

.agent-card h3 { 
  font-size: 17px; 
  font-weight: 600; 
  color: var(--gray-800); 
  margin-bottom: 0.5rem; 
}

.agent-card p { 
  font-size: 14px; 
  color: var(--gray-600); 
  line-height: 1.65; 
  margin-bottom: 1.25rem; 
}

.agent-metrics { 
  display: flex; 
  gap: 1rem; 
  flex-wrap: wrap; 
}

.agent-metric { 
  font-size: 12px; 
}

.agent-metric .val { 
  font-family: var(--font-display); 
  font-size: 1.5rem; 
  color: var(--amber); 
  line-height: 1; 
  display: block; 
}

.agent-metric .lbl { 
  color: var(--gray-400); 
  font-size: 11px; 
  display: block; 
  margin-top: 1px; 
}

.agent-tag { 
  display: inline-block; 
  background: rgba(246,173,85,0.1); 
  color: #B7791F; 
  font-size: 11px; 
  padding: 3px 9px; 
  border-radius: 6px; 
  margin: 2px; 
}

/* LIFECYCLE DIAGRAM */
.lifecycle { 
  display: grid; 
  grid-template-columns: repeat(4, 1fr); 
  gap: 1.5rem; 
  margin-top: 2.5rem; 
}

.lifecycle-phase { 
  background: var(--navy-mid); 
  border: 1px solid rgba(255,255,255,0.08); 
  border-radius: var(--radius-lg); 
  padding: 1.75rem; 
}

.phase-num { 
  font-family: var(--font-display); 
  font-size: 2.5rem; 
  color: rgba(246,173,85,0.3); 
  line-height: 1; 
  margin-bottom: 0.75rem; 
}

.lifecycle-phase h4 { 
  font-size: 15px; 
  font-weight: 600; 
  color: white; 
  margin-bottom: 0.5rem; 
}

.lifecycle-phase p { 
  font-size: 13px; 
  color: rgba(255,255,255,0.5); 
  line-height: 1.6; 
  margin-bottom: 1rem; 
}

.phase-agents { 
  display: flex; 
  flex-direction: column; 
  gap: 5px; 
}

.phase-agent { 
  font-size: 12px; 
  color: var(--amber); 
  background: rgba(246,173,85,0.1); 
  padding: 4px 10px; 
  border-radius: 6px; 
  display: flex; 
  align-items: center; 
  gap: 6px; 
}

.phase-agent::before { 
  content: '⚡'; 
  font-size: 11px; 
}

/* GOVERNANCE */
.gov-grid { 
  display: grid; 
  grid-template-columns: repeat(3, 1fr); 
  gap: 1.5rem; 
}

.gov-card { 
  background: var(--navy-mid); 
  border: 1px solid rgba(255,255,255,0.08); 
  border-radius: var(--radius); 
  padding: 1.75rem; 
}

.gov-icon { 
  font-size: 28px; 
  margin-bottom: 1rem; 
}

.gov-card h4 { 
  font-size: 16px; 
  font-weight: 600; 
  color: white; 
  margin-bottom: 0.5rem; 
}

.gov-card p { 
  font-size: 13.5px; 
  color: rgba(255,255,255,0.5); 
  line-height: 1.6; 
}

/* ROI STRIP */
.roi-strip { 
  background: linear-gradient(135deg, rgba(246,173,85,0.05), rgba(0,201,167,0.05)); 
  border: 1.5px solid var(--gray-200); 
  border-radius: var(--radius-lg); 
  padding: 2.5rem 3rem; 
  display: flex; 
  justify-content: space-around; 
  flex-wrap: wrap; 
  gap: 2rem; 
}

.roi-stat { 
  text-align: center; 
}

.roi-num { 
  font-family: var(--font-display); 
  font-size: 2.8rem; 
  color: var(--amber); 
  line-height: 1; 
  margin-bottom: 0.4rem; 
}

.roi-label { 
  font-size: 14px; 
  color: var(--gray-600); 
}

/* NOTICE */
.reg-notice { 
  background: rgba(246,173,85,0.08); 
  border: 1.5px solid rgba(246,173,85,0.25); 
  border-radius: var(--radius); 
  padding: 1.25rem 1.5rem; 
  display: flex; 
  align-items: flex-start; 
  gap: 12px; 
  margin-top: 2rem; 
}

.reg-notice-icon { 
  font-size: 20px; 
  flex-shrink: 0; 
  margin-top: 1px; 
}

.reg-notice p { 
  font-size: 13px; 
  color: var(--gray-700); 
  line-height: 1.6; 
}

.reg-notice strong { 
  color: var(--gray-800); 
}

/* CTA BAND */
.cta-band { 
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 100%); 
  padding: 80px 2rem; 
  text-align: center; 
}

.cta-band h2 { 
  font-family: var(--font-display); 
  font-size: clamp(2rem, 3.5vw, 2.8rem); 
  color: white; 
  margin-bottom: 1rem; 
}

.cta-band p { 
  font-size: 18px; 
  color: rgba(255,255,255,0.6); 
  max-width: 560px; 
  margin: 0 auto 2.5rem; 
  line-height: 1.7; 
}

.cta-actions { 
  display: flex; 
  gap: 1rem; 
  justify-content: center; 
  flex-wrap: wrap; 
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .concept-split { 
    grid-template-columns: 1fr; 
    gap: 2rem;
  }
  
  .vs-comparison { 
    grid-template-columns: 1fr; 
  }
  
  .agent-flow { 
    grid-template-columns: 1fr; 
  }
  
  .agent-flow::before {
    display: none;
  }
  
  .agents-grid { 
    grid-template-columns: 1fr; 
  }
  
  .lifecycle { 
    grid-template-columns: 1fr; 
  }
  
  .gov-grid { 
    grid-template-columns: 1fr; 
  }
  
  .roi-strip {
    flex-direction: column;
  }
  
  section { 
    padding: 5rem 2rem; 
  }
}