/* ============================================================
   MANDATEMIND 4.0 — FUTURISTIC CYBER + BRIGHT CYAN NAV
   Fully merged, conflict-free, homepage-ready
============================================================ */

/* ------------------------------
   GLOBAL
------------------------------ */
body {
  margin: 0;
  font-family: "Inter", Arial, sans-serif;
  background: #0A0F1F;
  color: #E2E8F0;
  line-height: 1.6;
}

h1, h2, h3 {
  color: #F8FAFC;
  letter-spacing: -0.5px;
}

.section {
  padding: 6rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
  text-align: left; /* override v2 */
}

.section h2 {
  text-align: center;
}

/* ------------------------------
   BRIGHT CYAN FUTURISTIC NAV
------------------------------ */
.mm-nav {
  background: linear-gradient(90deg, #009bb3, #00bcd4);
  color: #0A0F1F;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 4px 20px rgba(0,224,255,0.25);
}

.mm-nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mm-nav-links a,
.mm-nav-btn,
.mm-nav-link {
  color: #0A0F1F !important;
  font-weight: 600;
}

.mm-nav-links a:hover {
  color: #003344 !important;
}

.mm-cta {
  background: #0A0F1F;
  color: #4df3ff !important;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  font-weight: 600;
}

.mm-cta:hover {
  background: #002233;
}

/* ------------------------------
   HERO — FUTURISTIC CYBER
------------------------------ */
.hero {
  background: linear-gradient(135deg, #0A0F1F 0%, #002233 50%, #00485F 100%);
  padding: 8rem 2rem 7rem;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 20%, rgba(0,224,255,0.25), transparent 70%);
  opacity: 0.6;
  filter: blur(40px);
}

.hero h1 {
  font-size: 3.4rem;
  font-weight: 700;
  margin-bottom: 1.2rem;
}

.hero p {
  max-width: 750px;
  margin: 1rem auto 2.5rem;
  font-size: 1.3rem;
  color: #DCE7F5;
}

.hero-ctas {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.button-primary {
  background: linear-gradient(90deg, #00e0ff, #4df3ff);
  color: #0A0F1F;
  padding: 1rem 2.2rem;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 12px 32px rgba(0,224,255,0.35);
}

.button-secondary {
  padding: 1rem 2.2rem;
  border-radius: 12px;
  border: 1px solid rgba(0,224,255,0.35);
  color: #4df3ff;
  font-weight: 600;
  text-decoration: none;
}

.framework-strip {
  margin-top: 2rem;
  opacity: 0.85;
  font-size: 1rem;
  color: #BEE9FF;
}

/* ------------------------------
   PROBLEM SECTION
------------------------------ */
.problem {
  background: #0F172A;
  border-top: 1px solid #1E293B;
  border-bottom: 1px solid #1E293B;
}

.problem p {
  color: #CBD5E1;
}

/* ------------------------------
   CATEGORY CREATION
------------------------------ */
.category {
  background: #0A0F1F;
}

.category ul {
  margin-top: 2rem;
}

.category li {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  color: #4df3ff;
}

/* ------------------------------
   WORKFLOW — CYBER PIPELINE
------------------------------ */
.workflow-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 2rem;
  align-items: center;
  margin-top: 3rem;
}

.workflow-step {
  background: rgba(255,255,255,0.05);
  padding: 2rem;
  border-radius: 14px;
  border: 1px solid rgba(0,224,255,0.25);
  box-shadow: 0 12px 32px rgba(0,224,255,0.08);
  text-align: center;
}

.workflow-step small {
  display: block;
  margin-top: 0.5rem;
  color: #94A3B8;
}

.workflow-arrow {
  font-size: 2.5rem;
  color: #38bdf8;
  opacity: 0.8;
}

/* ------------------------------
   DIFFERENTIATION TABLE
------------------------------ */
.comparison-table {
  margin-left: auto;
  margin-right: auto;
  max-width: 800px;
  margin-top: 3rem;
  border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.comparison-table th {
  font-size: 1.3rem;
  color: #4df3ff;
}

.comparison-table td {
  font-size: 1.1rem;
  color: #E2E8F0;
}

.section.fade-up .feature-card table td {
  text-align: left !important;
}



/* ------------------------------
   MODULE GRID
------------------------------ */
.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.module-card {
  background: #0F172A;
  padding: 2rem;
  border-radius: 16px;
  border: 1px solid rgba(0,224,255,0.25);
  box-shadow: 0 12px 32px rgba(0,224,255,0.08);
  transition: transform 0.2s ease;
}

.module-card:hover {
  transform: translateY(-4px);
}

.module-card h3 {
  color: #4df3ff;
  margin-bottom: 0.75rem;
}

/* ------------------------------
   PERSONAS
------------------------------ */
.personas ul {
  margin-top: 2rem;
}

.personas li {
  font-size: 1.2rem;
  color: #E2E8F0;
  margin-bottom: 0.75rem;
}

/* ------------------------------
   JOURNEY
------------------------------ */
.journey-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.journey-card {
  background: #0F172A;
  padding: 2rem;
  border-radius: 14px;
  border: 1px solid rgba(0,224,255,0.25);
  box-shadow: 0 12px 32px rgba(0,224,255,0.08);
}

/* ------------------------------
   FRAMEWORK GRID
------------------------------ */
.framework-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
}

.framework-card {
  background: #0F172A;
  padding: 1.5rem;
  border-radius: 12px;
  border: 1px solid rgba(0,224,255,0.25);
  text-align: center;
  font-size: 1.2rem;
  color: #4df3ff;
}

/* ------------------------------
   MANIFESTO
------------------------------ */
.manifesto {
  background: #0A0F1F;
  border-top: 1px solid #1E293B;
  border-bottom: 1px solid #1E293B;
}

.manifesto p {
  max-width: 800px;
  margin: 1rem auto;
  font-size: 1.25rem;
  color: #CBD5E1;
}

/* ------------------------------
   CTA SECTION
------------------------------ */
.cta {
  text-align: center;
  padding: 6rem 2rem;
}

.cta h2 {
  font-size: 2.6rem;
  margin-bottom: 1rem;
  color: #4df3ff;
}

.cta p {
  font-size: 1.2rem;
  color: #E2E8F0;
  margin-bottom: 2rem;
}

/* ============================================================
   FINAL FIXES — DARK TEXT + CENTERING + LOGO + DEMO BUTTON
============================================================ */

/* Bigger + darker MandateMind logo */
.mm-logo img {
  height: 128px !important;   /* increase size */
  width: auto !important;
  filter: brightness(0.85) contrast(1.1); /* darken + sharpen */
}


/* Center the Mandate Intelligence section */
.section.category {
  text-align: center !important;
}
.section.category p {
  color: #DCE7F5 !important;
}
.section.category ul {
  text-align: center !important;
  list-style: none;
  padding: 0;
}
.section.category li {
  color: #4df3ff !important;
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
}

/* Fix all section headings */
.section h2,
.section h3,
.section h1 {
  color: #F8FAFC !important;
}

/* Fix all section body text */
.section p,
.section li,
.section td,
.section small {
  color: #E2E8F0 !important;
}

/* Restore clickability for secondary buttons */
.button-secondary {
  pointer-events: auto !important;
  cursor: pointer !important;
  color: #4df3ff !important;
}

/* Dropdown visibility */
.mm-dropdown {
  background: rgba(0, 22, 33, 0.95) !important;
  border: 1px solid rgba(0,224,255,0.35) !important;
}
.mm-dropdown a {
  color: #E2E8F0 !important;
}
.mm-dropdown a:hover {
  background: rgba(0,224,255,0.15) !important;
  color: #4df3ff !important;
}

/* Footer */
.mm-footer p,
.mm-footer nav a {
  color: #E2E8F0 !important;
}

/* Partner strip */
.partner-strip span {
  color: #E2E8F0 !important;
}

/* Fix Alacrinet logo size */
.partner-strip img {
  height: 32px !important;
  max-width: 140px !important;   /* prevents huge scaling */
  width: auto !important;
}

/* Fix Alacrinet logo size */
.partner-strip img {
  height: 32px !important;
  max-width: 140px !important;
  width: auto !important;
}

/* Fix demo button clickability */
.hero .button-secondary {
  pointer-events: auto !important;
  cursor: pointer !important;
}

/* Ensure hero buttons are above nav overlay */
.hero {
  position: relative;
  z-index: 1;
}

.hero-ctas a {
  position: relative;
  z-index: 2;
}


/* Center the entire partner strip */
.partner-strip {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  margin-top: 2rem;
  padding: 1rem 0;
}

.partner-strip img {
  height: 32px !important;
  max-width: 140px !important;
  width: auto !important;
  margin: 0.5rem 0;
}

/* Make both hero buttons match the secondary style */
.hero-ctas .button-primary {
  background: transparent !important;
  border: 1px solid rgba(0,224,255,0.35) !important;
  color: #4df3ff !important;
  box-shadow: none !important;
}

.hero-ctas .button-primary:hover {
  background: rgba(0,224,255,0.15) !important;
  color: #4df3ff !important;
}


/* Framework flow layout */
.framework-flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
  text-align: center;
}

.framework-step {
  background: #0F172A;
  padding: 1.5rem;
  border-radius: 14px;
  border: 1px solid rgba(0,224,255,0.25);
  color: #4df3ff;
  font-size: 1.3rem;
  font-weight: 600;
  box-shadow: 0 12px 32px rgba(0,224,255,0.08);
}

.framework-arrow {
  font-size: 2.5rem;
  color: #38bdf8;
  opacity: 0.8;
}


/* Frameworks section — two-column mapped layout */
.framework-flow {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3rem;
}

.framework-evidence {
  background: #0F172A;
  padding: 1.5rem 2rem;
  border-radius: 14px;
  border: 1px solid rgba(0,224,255,0.25);
  color: #4df3ff;
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0,224,255,0.08);
}

.framework-arrow {
  font-size: 2.5rem;
  color: #38bdf8;
  opacity: 0.8;
  margin: 1rem 0;
}

.framework-columns {
  display: flex;
  gap: 2.5rem;
  margin-top: 1rem;
}

.framework-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.framework-card {
  background: #0F172A;
  padding: 1.2rem;
  border-radius: 12px;
  border: 1px solid rgba(0,224,255,0.25);
  color: #4df3ff !important;
  font-size: 1.2rem;
  font-weight: 600;
  text-align: center;
  box-shadow: 0 12px 32px rgba(0,224,255,0.08);
}

/* Horizontal workflow */
.workflow-horizontal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-top: 3rem;
}

.wf-item {
  background: #0F172A;
  padding: 1.5rem;
  border-radius: 14px;
  border: 1px solid rgba(0,224,255,0.25);
  text-align: center;
  width: 180px;
  box-shadow: 0 12px 32px rgba(0,224,255,0.08);
}

.wf-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.wf-title {
  color: #4df3ff;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
}

.wf-sub {
  color: #DCE7F5;
  font-size: 0.9rem;
}

.wf-arrow {
  font-size: 2rem;
  color: #38bdf8;
  opacity: 0.8;
}