:root {
  --navbar-height: 7vh;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background-color: rgb(10, 1, 24);
  /* background-color: beige; */
}

h2 {
  color: white;
  text-align: center;
  font-size: 2em;
  text-align: center;
  text-shadow:
    1px 1px 0 #b026ff,
    2px 2px 0 #a020f0,
    3px 3px 0 #8f1de0,
    7px 7px 10px rgba(0, 0, 0, 0.6);
}

h3 {
  color: white;
  text-align: center;
  font-size: 1.5em;
  text-shadow:
    1px 1px 0 #b026ff,
    2px 2px 0 #a020f0,
    3px 3px 0 #8f1de0,
    7px 7px 10px rgba(0, 0, 0, 0.6);
}

.navbar-logo-link {
  position: fixed;
  top: 0;
  left: 15%;
  height: 7vh;
  display: flex;
  align-items: center;
  z-index: 1001;
}

.navbar-logo-universal {
  height: 4.375rem;
  margin-left: 2rem;
}

.nav-top-bar {
  display: none;
  align-items: center;
  justify-content: flex-end;
  position: fixed;
  top: 0;
  left: 0;
  width: 70%;
  z-index: 1000;
  background: rgba(20, 5, 40, 0.9);
  padding: 0.5rem 1rem;
}

.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 2rem;
  height: 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}

.hamburger-btn span {
  display: block;
  height: 0.1875rem;
  width: 100%;
  background: white;
  border-radius: 0.125rem;
  transition:
    transform 0.3s ease,
    opacity 0.3s ease;
}

.hamburger-btn.active span:nth-child(1) {
  transform: translateY(0.65rem) rotate(45deg);
}

.hamburger-btn.active span:nth-child(2) {
  opacity: 0;
}

.hamburger-btn.active span:nth-child(3) {
  transform: translateY(-0.65rem) rotate(-45deg);
}

nav ul {
  list-style: none;
  background-image:
    linear-gradient(rgba(137, 43, 226, 0.5), rgba(137, 43, 226, 0.5)),
    url(images/giphy-upscale-1.gif);
  background-blend-mode: overlay;
  background-size: cover;
  background-repeat: no-repeat;
  position: fixed;
  top: 0;
  left: 50%;
  transform: translateX(-50%);

  display: flex;
  height: var(--navbar-height);
  width: 70%;
  justify-content: right;
  align-items: center;
  z-index: 999;
}

nav ul a {
  margin-right: auto;
  margin-left: 4%;
}
nav ul li {
  text-align: center;
  width: auto;
  font-size: 1.3rem;
  padding: 1% 1.5%;
  font-weight: 700;
}
nav ul a {
  text-decoration: none;
  background: linear-gradient(
    to right,

    rgba(38, 214, 245, 0.993),
    rgb(19, 247, 31),
    yellow,
    rgb(220, 43, 226),
    rgb(255, 255, 255)
  );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
  color: transparent;
}

.p1 {
  text-align: center;
}
span {
  background: linear-gradient(
    to right,

    rgb(255, 255, 255),
    rgb(220, 43, 226),
    rgb(255, 145, 0),
    rgba(38, 214, 245, 0.993),
    rgba(255, 255, 255, 0.925),
    rgb(72, 247, 19),
    rgb(255, 196, 0),
    rgb(220, 43, 226),
    rgb(255, 255, 255)
  );

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* ============ MOBILE NAV (hamburger) ============ */
@media (max-width: 768px) {
  .nav-top-bar {
    display: flex;
    height: 4.5rem;
  }

  .hamburger-btn {
    display: flex;
  }

  nav ul {
    top: 4.5rem;
    left: 0;
    transform: none;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 4.5rem);
    overflow-y: auto;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    display: none;
  }

  nav ul.nav-open {
    display: flex;
  }

  nav ul li {
    width: 100%;
    text-align: left;
    padding: 1rem 1.5rem;
    font-size: 1.1rem;
  }

  nav ul a {
    margin-left: 0;
  }
}

.running-text-container {
  position: relative;
  width: 70%;
  overflow: hidden;
  white-space: nowrap;
  background: black;
  margin: 0 15%;
  margin-top: calc(var(--navbar-height) + 0.1rem);
  padding: 0.5%;
  border-top: 1px solid white;
  border-bottom: 1px solid white;
}

.running-text {
  display: inline-block;
  padding-left: 100%;
  color: white;
  animation: marquee 20s linear infinite;
}

.running-text-container:hover .running-text {
  animation-play-state: paused;
}

@keyframes marquee {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-100%, 0, 0);
  }
}

.herosection {
  display: flex;
  border-bottom: 1px solid white;
  width: 70%;
  height: auto;
  justify-content: center;
  align-items: center;
  margin: 0.1% auto;
  margin-bottom: 0;
  background-image: url(images/giphy-upscale-1.gif);
}

.herosection .img1 {
  height: auto;
  margin-left: 3%;
}
.hero-text {
  color: white;
  height: auto;
}

.hero-text h1 {
  font-size: 3em;
  margin: -5% 5% 5%;
  color: #f0f0f0;
  font-weight: 800;
  text-align: center;
  text-shadow:
    1px 1px 0 #b026ff,
    2px 2px 0 #a020f0,
    3px 3px 0 #8f1de0,
    7px 7px 10px rgba(0, 0, 0, 0.6);
}
h1 span,
h2 span,
h3 span,
p span,
nav ul li {
  text-shadow: none;
}

.hero-text p {
  font-size: 1.5em;
  margin: 0 5%;
  color: #f0f0f0;

  text-align: center;
  text-shadow: 1px 1px 0 #b026ff;
}

.crymback {
  width: 70%;
  margin: 0 15%;
  background-image: url(images/backdrop-dark-1.png);
  background-position: center;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  background-size: cover;
  height: auto;
}

.Redefining-container {
  background-color: rgba(137, 43, 226, 0.1);
  height: auto;
  width: 70%;
  margin: 0 15%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.Redefining {
  color: white;
  padding: 1.75%;
  margin: 3%;
  width: auto;
  height: auto;
  border: 1px dotted white;
  border-radius: 30px;

  /* Glassmorphism */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  color: white;

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.Redefining p,
p,
.faq-item summary {
  color: #f0f0f0;
  text-align: center;
  text-shadow: 1px 1px 0 #b026ff;
}

ul li {
  color: #f0f0f0;
  text-shadow: 1px 1px 0 #b026ff;
}
span {
  text-shadow: none;
}
.card-container {
  background-color: rgba(137, 43, 226, 0.1);
  margin: 0;
  width: 100%;
}

.cards {
  margin: 2% 3%;
  margin-top: 0;
  padding-top: 1%;
  display: flex;
  justify-content: center;
  height: auto;
}
.cards img {
  padding-right: 5%;
}

.container-1,
.container-2,
.container-3 {
  margin: 1%;
  padding: 1.75%;
  width: 22vw;
  border-radius: 30px;

  /* Glassmorphism */
  background: rgba(255, 255, 255, 0.15); /* lighter than before */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  color: white;

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.container-1 img,
.container-2 img,
.container-3 img {
  float: left;
}
.container-1 h3,
.container-2 h3,
.container-3 h3,
.cards ul li,
.roadmap ul li,
.Roadmap1-3 li,
.Roadmap4-5 li {
  text-align: left;
  list-style-position: inside;
}

#Tokenomics,
.faq {
  background-color: rgba(137, 43, 226, 0.1);
  margin: 0 15%;
  margin-bottom: 1%;
  text-align: center;
}

.allphases,
.roadmap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  height: auto;
  background-color: rgba(137, 43, 226, 0.1);
  width: 100%;
  padding: 1%;
  text-align: center;
  position: relative;
}
.allphases p {
  font-size: 1.1rem;
}

.Phase1,
.Phase2,
.Phase3,
.Phase4,
.Phase5,
.Roadmap1,
.Roadmap2,
.Roadmap3,
.Roadmap4,
.Roadmap5 {
  margin: 1%;
  padding: 1.75%;
  width: 20vw;
  height: auto;
  border: 1px dotted white;
  border-radius: 30px;
  background-color: black;
  color: white;

  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  color: white;

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

#crymroadmap {
  text-align: center;

  margin: 0 1.5%;
}

.roadmapimg .faq img {
  background-color: rgba(137, 43, 226, 0.1);
  margin: 0 14%;
}

footer {
  background-color: #0a0e27;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(100, 120, 255, 0.15);
  width: 70%;
  margin: 0 auto;
  margin-top: auto;
}

footer p {
  color: white;
  margin: 0;
}
#faq-section {
  padding: 1.5%;
  padding-bottom: 0;
  background-color: rgba(137, 43, 226, 0.1);
  width: 70%;
  margin: 0 15%;
}

#faq-section .faq-img {
  display: flex;
  justify-content: center;
  padding-bottom: 0.8%;
}

.faq-container {
  display: flex;
  justify-content: center;

  padding: 0.8% 0;
  width: 100%;
}
.faq-list1,
.faq-list2 {
  width: 100%;
}

.faq-item {
  padding: 2%;
  margin: 0 3% 3% 3%;

  border-radius: 0.8rem;
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  color: white;

  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.faq-item summary {
  cursor: pointer;
  font-size: 1.2em;
  font-weight: 700;
  list-style: none;
  position: relative;
  padding-right: 2rem;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  font-size: 1.3em;
  transition: transform 0.25s ease;
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item p {
  margin-top: 1rem;
  line-height: 1.6;
}

.allphases button {
  font-size: 1rem;
  padding: 0.5em 1.5em;
  min-width: 6em;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 0.5rem;
  outline: none;
  text-align: center;
  display: block;
  margin: 0 auto;
  color: white;
  font-weight: 500;

  /* Glassmorphism — more vibrant tint */
  background: linear-gradient(
    135deg,
    rgba(38, 214, 245, 0.55),
    rgba(176, 38, 255, 0.45)
  );
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow:
    0 4px 24px rgba(38, 214, 245, 0.5),
    0 0 20px rgba(176, 38, 255, 0.3),
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -1px 6px rgba(176, 38, 255, 0.3);

  transition:
    transform 0.2s ease,
    background 0.2s ease,
    box-shadow 0.2s ease;
}

.allphases button:hover {
  background: linear-gradient(
    135deg,
    rgba(38, 214, 245, 0.7),
    rgba(176, 38, 255, 0.6)
  );
  transform: translateY(-2px);
  box-shadow:
    0 6px 28px rgba(38, 214, 245, 0.65),
    0 0 26px rgba(176, 38, 255, 0.45),
    inset 0 1px 1px rgba(255, 255, 255, 0.7),
    inset 0 -1px 6px rgba(176, 38, 255, 0.4);
}
.Phase1 button {
  animation: ongoing 2s ease-in-out infinite;
  will-change: transform;
  contain: paint;
  transform: translateZ(0);
}
.Phase1 button:hover {
  animation: none;
}

footer strong {
  font-size: 0.7rem;
}
@keyframes breathe-blink {
  0%,
  100% {
    color: blue;
    transform: scale(1);
  }
  50% {
    color: purple;
    transform: scale(1.15);
  }
}

@keyframes ongoing {
  0% {
    color: rgb(255, 255, 255);
    transform: scale(1);
  }
  16.67% {
    color: red;
    transform: scale(1.15);
  }
  33.33% {
    color: rgb(255, 145, 0);
    transform: scale(1);
  }
  50% {
    color: rgba(38, 214, 245, 0.993);
    transform: scale(1.15);
  }
  66.67% {
    color: yellow;
    transform: scale(1);
  }
  83.33% {
    color: rgb(72, 247, 19);
    transform: scale(1.15);
  }
  100% {
    color: rgb(255, 255, 255);
    transform: scale(1);
  }
}

.terms-outer,
.privacy-outer {
  background-image: url(images/backdrop-dark-1.png);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  min-height: 100vh;
  padding: calc(var(--navbar-height, 7vh) + 2rem) 1rem 3rem;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  width: 70%;
  margin-left: 15%;
}

.terms-card,
.privacy-card {
  width: 85%;
  max-width: 60rem;
  padding: 2.5rem 3rem;
  border-radius: 1rem;

  /* Glassmorphism, same treatment as the login and dashboard cards */
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.25);
  color: rgb(235, 235, 235);
}

.terms-card h1,
.terms-card h2,
.privacy-card h1,
.privacy-card h2 {
  color: #f0f0f0;
  font-weight: 800;
  text-shadow:
    1px 1px 0 #b026ff,
    2px 2px 0 #a020f0,
    3px 3px 0 #8f1de0,
    7px 7px 10px rgba(0, 0, 0, 0.6);
}

.terms-card p,
.terms-card ul li,
.privacy-card p,
.privacy-card ul li {
  font-weight: 300;
  text-shadow: 1px 1px 0 #b026ff;
}

.terms-card h1,
.privacy-card h1 {
  font-size: 2.4rem;
  text-align: center;
  margin-bottom: 1.75rem;
}

.terms-card h2,
.privacy-card h2 {
  font-size: 1.4rem;
  margin: 2rem 0 0.75rem;
}

.terms-card p,
.privacy-card p {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.terms-card ul,
.privacy-card ul {
  margin: 0 0 1rem 1.5rem;
  text-shadow:
    1px 1px 0 #b026ff,
    2px 2px 0 #a020f0,
    3px 3px 6px rgba(0, 0, 0, 0.6);
}

.terms-card li,
.privacy-card li {
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 0.6rem;
  text-shadow:
    1px 1px 0 #b026ff,
    2px 2px 0 #a020f0,
    3px 3px 6px rgba(0, 0, 0, 0.6);
}

.terms-card strong,
.privacy-card strong {
  font-weight: 800;
  text-shadow:
    1px 1px 0 #b026ff,
    2px 2px 0 #a020f0,
    3px 3px 6px rgba(0, 0, 0, 0.6);
}

/* ==========================================================
   RESPONSIVE BREAKPOINTS
   Ordered largest -> smallest so later rules override earlier
   ones at the same specificity.
   ========================================================== */

/* ********************1440px************************ */
@media (max-width: 1440px) {
  .hero-text h1 {
    font-size: 2.3em;
  }
  .hero-text p {
    font-size: 1rem;
  }
  .Redefining h2 {
    font-size: 1.5rem;
  }
  .card-container {
    padding: 2%;
  }
  .cards {
    position: relative;
    margin: 0;
  }

  .roadmapimg {
    margin: 1%;
  }

  .Roadmap1 h3,
  .Roadmap2 h3,
  .Roadmap3 h3,
  .Roadmap4 h3,
  .Roadmap5 h3 {
    font-size: 1.2rem;
  }
  .Roadmap1,
  .Roadmap2,
  .Roadmap3,
  .Roadmap4,
  .Roadmap5 {
    padding: 2% 3%;
  }
  .cards h3 {
    font-size: 1.2rem;
  }
  .faq-img img {
    margin: 0 3%;
  }
  footer {
    font-size: 0.7rem;
    width: 70%;
    margin-bottom: 0;
  }
}
/* ---------- 1024px (small laptops / tablet landscape) ---------- */
@media (max-width: 1024px) {
  .navbar-logo-link {
    left: 0;
  }

  nav ul {
    width: 100%;
    left: 0;
    transform: none;
  }

  nav ul li {
    width: auto;
    padding: 1% 1.5%;
  }
  .running-text-container {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .herosection {
    width: 100%;
    padding: 3% 0 0 0;
  }

  .Redefining-container,
  .card-container,
  .allphases,
  .roadmap,
  #faq-section,
  footer {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
  }

  .hero-text h1 {
    font-size: 2.3em;
    margin: 3% 5%;
  }

  .hero-text p {
    font-size: 1.2em;
  }

  .crymback {
    width: 100%;
    margin: 0;
  }

  .container-1,
  .container-2,
  .container-3 {
    width: 100%;
  }

  .roadmap {
    padding-bottom: 2%;
  }

  .Phase1,
  .Phase2,
  .Phase3,
  .Phase4,
  .Phase5 {
    width: 30%;
  }
  .Roadmap1,
  .Roadmap2,
  .Roadmap3,
  .Roadmap4,
  .Roadmap5 {
    width: 31%;
  }

  .terms-outer,
  .privacy-outer {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .terms-card,
  .privacy-card {
    margin: 2%;
    width: 100%;
  }
}

/* ---------- 768px (tablets / large phones) ---------- */
@media (max-width: 768px) {
  .nav-top-bar {
    width: 100%;
  }
  .hamburger-btn {
    margin-right: 5%;
  }
  .navbar-logo-link {
    top: 1%;
    left: 5%;
  }
  .navbar-logo-universal {
    height: 4.5rem;
    margin: 0;
  }
  nav ul li {
    text-align: center;
    margin: 0;
    padding: 0;
  }

  .running-text-container {
    margin-top: calc(var(--navbar-height) + 0.5rem);
  }
  .herosection {
    width: 100%;
    margin: 0;
  }

  .hero-text {
    position: absolute;
    width: 80%;
    top: 28%;
  }

  .hero-text h1 {
    font-size: 2.2rem;
  }
  .hero-text p {
    font-size: 1.2rem;
  }

  h2 {
    font-size: 1.5em;
  }

  h3 {
    font-size: 1.15em;
  }

  .running-text {
    font-size: 0.85em;
  }

  .Redefining-container {
    width: 95%;
    margin: 2% auto 0 auto;
    padding: 1% 0%;
  }
  .cards {
    flex-direction: column;
  }
  .container-1,
  .container-2,
  .container-3 {
    width: 95%;
    margin: 2% auto 1% auto;
    padding: 2% 5% 3% 5%;
  }

  .Phase1,
  .Phase2,
  .Phase3,
  .Phase4,
  .Phase5 {
    width: 45%;
  }

  .Roadmap1,
  .Roadmap2,
  .Roadmap3,
  .Roadmap4,
  .Roadmap5 {
    width: 95%;
    padding: 2% 5% 3% 5%;
  }

  #Tokenomics,
  .faq-container {
    width: 95%;
    margin: 0 auto 1% auto;
  }
  #Tokenomics h3 {
    font-size: 1.1em;
  }

  .faq-container {
    flex-wrap: wrap;
  }
  #faq-section {
    width: 100%;
  }

  .faq-item summary {
    font-size: 1em;
  }

  .faq-item {
    margin-bottom: 2%;
  }
  footer {
    font-size: 0.7rem;
  }

  .terms-card,
  .privacy-card {
    padding: 2rem 1.75rem;
  }

  .terms-card h1,
  .privacy-card h1 {
    font-size: 2rem;
  }
}

/* ----------501px (large phones) ---------- */
@media (max-width: 501px) {
  .nav-top-bar {
    width: 100%;
  }

  .navbar-logo-link {
    top: 1%;
  }
  .navbar-logo-universal {
    height: 3.8rem;
    margin: 0;
  }
  nav ul li {
    text-align: center;
    margin: 0;
    padding: 0;
  }
  .running-text-container {
    margin-top: calc(var(--navbar-height) + 1.1rem);
  }
  .herosection {
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
  }

  .herosection .img1 {
    width: 90%;
    margin-bottom: 0;
  }

  .hero-text {
    width: 90%;
  }

  .hero-text h1 {
    font-size: 1.7rem;
  }
  h2 {
    font-size: 1.5em;
  }

  h3 {
    font-size: 1.15em;
  }

  .running-text {
    font-size: 0.85em;
  }

  .hero-text p {
    font-size: 0.95em;
  }

  .Redefining-container {
    width: 95%;
    margin: 3% auto 0 auto;
  }
  .container-1,
  .container-2,
  .container-3 {
    width: 95%;
    margin-bottom: 1rem;
  }

  .allphases {
    flex-wrap: wrap;
  }
  .Phase1,
  .Phase2,
  .Phase3,
  .Phase4,
  .Phase5 {
    width: 95%;
    margin: 2% 1%;
  }
  .Roadmap1,
  .Roadmap2,
  .Roadmap3,
  .Roadmap4,
  .Roadmap5 {
    width: 95%;
    margin: 2% 1%;
    padding: 2% 5%;
    list-style: inside;
  }
  .terms-outer,
  .privacy-outer {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .terms-card,
  .privacy-card {
    padding: 1.5rem 1.1rem;
  }

  .terms-card h1,
  .privacy-card h1 {
    font-size: 1.7rem;
  }

  .terms-card h2,
  .privacy-card h2 {
    font-size: 1.2rem;
  }

  .terms-card p,
  .terms-card li,
  .privacy-card p,
  .privacy-card li {
    font-size: 1rem;
  }

  .terms-card ul,
  .privacy-card ul {
    margin-left: 1.1rem;
  }

  /* ===== Scroll-stacking effect, 501px and below only ===== */
  .tokenomics-stack {
    position: relative;
  }

  #Tokenomics {
    position: sticky;
    top: 4.5rem; /* matches .nav-top-bar's fixed height at this width */
    z-index: 10;
  }

  .allphases {
    display: block;
  }

  .Phase1 {
    position: sticky;
    top: calc(1.5rem + 9rem);
    z-index: 1;
  }
  .Phase2 {
    position: sticky;
    top: calc(1.5rem + 9.75rem);
    z-index: 2;
  }
  .Phase3 {
    position: sticky;
    top: calc(1.5rem + 10.5rem);
    z-index: 3;
  }
  .Phase4 {
    position: sticky;
    top: calc(1.5rem + 11.25rem);
    z-index: 4;
  }
  .Phase5 {
    position: sticky;
    top: calc(1.5rem + 12rem);
    z-index: 5;
  }

  #crymroadmap {
    /* Tune ONLY this one value if there's ever a gap or overlap under the heading */
    --roadmap-title-height: 4rem;
  }

  .roadmap-title {
    position: sticky;
    top: 4.5rem;
    z-index: 10;
    background-color: rgba(137, 43, 226, 0.1);
    padding: 0.5rem 0;
    margin: 0;
  }

  .roadmap {
    display: block;
  }

  .Roadmap1 {
    position: sticky;
    top: calc(4.5rem + var(--roadmap-title-height));
    z-index: 1;
  }
  .Roadmap2 {
    position: sticky;
    top: calc(4.5rem + var(--roadmap-title-height) + 0.75rem);
    z-index: 2;
  }
  .Roadmap3 {
    position: sticky;
    top: calc(4.5rem + var(--roadmap-title-height) + 1.5rem);
    z-index: 3;
  }
  .Roadmap4 {
    position: sticky;
    top: calc(4.5rem + var(--roadmap-title-height) + 2.25rem);
    z-index: 4;
  }
  .Roadmap5 {
    position: sticky;
    top: calc(4.5rem + var(--roadmap-title-height) + 3rem);
    z-index: 5;
  }
}