:root {
  /* new grid color variable */
  --grid-line-color: rgba(0, 0, 0, 0.08);
  /* */
  --gradient-start: #f3f4f6;
  --gradient-end: #ffffff;
  /* */
  --flow-gradient-1: #E6E6E6;
  --flow-gradient-2: #F2F2F2;
  --flow-gradient-3: #EBFAFC;
  --flow-gradient-4: #CEECED;
  /* */
   --dot-color: rgba(0, 0, 0, 0.1);
  --dot-bg: #ffffff;
  /* */
  --diagonal-line-color: rgba(0, 0, 0, 0.05);
  --diagonal-bg: #ffffff;
  /* */
}


body.dark-mode {
  /* darker grid lines for dark mode */
  --grid-line-color: rgba(255, 255, 255, 0.08);
  /* */
  --gradient-start: #1f1f1f; /* dark gray */
  --gradient-end: #121212;   /* near black */
  /* */
  --flow-gradient-1: #1C1D1F;
  --flow-gradient-2: #313136;
  --flow-gradient-3: #45454F;
  --flow-gradient-4: #0F0F0F;
  /* */
  --dot-color: rgba(255, 255, 255, 0.15);
  --dot-bg: #0f0f0f;
  /* */
  --diagonal-line-color: rgba(255, 255, 255, 0.06);
  --diagonal-bg: #0f0f0f;
  /* */
}


/** Grid background **/
.mb-grid-background-grid {
  position: relative; /* makes pseudo-element layer properly */
}

.mb-grid-background-grid::before {
  content: "";
  position: fixed; /* sticks to viewport */
  inset: 0;
  z-index: 0; /* ensures it stays behind content */
  pointer-events: none; /* don't block clicks */

  background: 
    linear-gradient(to right, var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px);
  background-size: 80px 80px; /* grid size */

  /* fade out at bottom */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0));
  mask-repeat: no-repeat;
  mask-size: 100% 100%;
}

//** Grid background **/
.mb-grid-background-grid-smaller {
  position: relative; /* parent must be relative */
  overflow: hidden; 
}

.mb-grid-background-grid-smaller {
  position: relative; /* parent must be relative */
  overflow: hidden;   /* ensures gradient doesn't leak out */
}

.mb-grid-background-grid-smaller::before {
  content: "";
  position: absolute; /* position relative to parent, not viewport */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  pointer-events: none;

  background: 
    linear-gradient(to right, var(--grid-line-color) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line-color) 1px, transparent 1px);
  background-size: 30px 30px;

  /* Fade out around edges (40% solid, then fade) */
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: cover;

  mask-image: radial-gradient(circle, rgba(0,0,0,1) 40%, rgba(0,0,0,0) 100%);
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: cover;
}



/** Gradient background **/
.mb-background-gradient {
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
}

/** Animated gradient flow **/
.mb-animated-gradient-flow {
  background: linear-gradient(-45deg,
    var(--flow-gradient-1),
    var(--flow-gradient-2),
    var(--flow-gradient-3),
    var(--flow-gradient-4)
  );
  background-size: 400% 400%;
  animation: gradientFlow 15s ease infinite;
}

/* animation keyframes */
@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/** Dot pattern **/
.mb-dot-pattern {
  background-color: var(--dot-bg);
  background-image: radial-gradient(var(--dot-color) 1px, transparent 1px);
  background-size: 24px 24px; /* spacing of dots */
}

/** Diagonal Lines **/
.mb-diagonal-lines {
  background-color: var(--diagonal-bg);
  background-image: repeating-linear-gradient(
    45deg, 
    var(--diagonal-line-color), 
    var(--diagonal-line-color) 1px, 
    transparent 1px, 
    transparent 20px
  );
}


.outer-ripple-btn {
  position: relative;
  padding: 30px 35px;
  border: none;
  border-radius: 50%;
  background-color: #161616;
  color: #fefefe;
  cursor: pointer;
  z-index: 1;
}

/* ripple waves outside */
.outer-ripple-btn::before,
.outer-ripple-btn::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid rgba(244, 244, 244, 0.4); /* white ripple outline */
  transform: translate(-50%, -50%) scale(1);
  animation: outer-ripple 2.5s linear infinite;
  z-index: -1; /* behind button */
}

.outer-ripple-btn::after {
  animation-delay: 1.25s; /* stagger for continuous flow */
}

@keyframes outer-ripple {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(2.8);
    opacity: 0;
  }
}





 /* For desktop: */
@media only screen and (min-width: 768px) {



}