body {
  font-family: 'Outfit', sans-serif;
  background-color: #0D0E12;
}

html, body {
  overflow-x: hidden !important;
}

.noise-background {
  z-index: 99;
  opacity: 0.03;
  pointer-events: none;
  background-image: url('../img/noise-bg.png');
  background-position: 0 0;
  background-size: auto;
  width: 100%;
  height: 100%;
  position: fixed;
}

 .solana-button
{
  position: relative;
  padding: 0.5rem 1.5rem;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  color: white;
  background: #0D0E12;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  z-index: 1;
  transition: background 0.3s ease;
}

.gradient-border-button {
  position: relative;
  padding: 0.5rem 1.5rem;
  font-family: 'Outfit', sans-serif;
  font-size: 1rem;
  color: white;
  background: #0D0E12;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  z-index: 1;
  overflow: hidden;
  transition: color 0.3s ease;
}

.gradient-border-button::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(90deg, #00FFA3, #03E1FF, #DC1FFF);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  z-index: -1;
  transition: padding 0.3s ease; /* twice as fast */
}

.gradient-border-button::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: linear-gradient(90deg, #00FFA3, #03E1FF, #DC1FFF);
  transform: scale(0);
  opacity: 1;
  transform-origin: center;
  transition: transform 0.3s ease; /* faster fill */
  z-index: -2;
}

.gradient-border-button:hover::before {
  padding: 0;
}

.gradient-border-button:hover::after {
  transform: scale(1);
}

.gradient-border-button:hover {
  color: white;
}

.trixi-footer
{
	margin-top:20px;
}

.buttons-area
{  display: inline-flex;
  align-items: center;
  justify-content: center;

}

  .button-small {
    padding:5px!important;
  }

@media (max-width: 560px) {
  .button-wide {
    display: none;
  }
  
  .open-app {
    font-size: 0.875rem; 
    padding-top: 0.625rem; 
    padding-bottom: 0.625rem;
    padding-left: 1.25rem; 
    padding-right: 1.25rem;
  }

  .button-small {
    display: inline;
  }
  
}

@media (min-width: 560px) {
  .button-small {
    display: none;
  }
}

footer {
  font-size: 1rem;
}

footer a {
  transition: color 0.2s ease;
}

.faq-toggle {
  cursor: pointer;
  transition: color 0.3s ease;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
}

.faq-open .faq-answer {
  max-height: 500px; /* or auto if JS is involved */
}

.solana-gradient {
  background: linear-gradient(90deg, #00FFA3, #03E1FF, #DC1FFF);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

}

/* Reorder panels below 1024px */
@media (max-width: 768px) {
  .panel-image-1 { order: 1; }
  .panel-text-1  { order: 2; }
  .panel-image-2 { order: 3; }
  .panel-text-2  { order: 4; }
  .panel-image-3 { order: 5; }
  .panel-text-3  { order: 6; }
  
    .hero-background {
    opacity: 0.3;

	}
	


  .image-responsive {
    width: 100%;
    height: auto;
    margin-top: 1rem;
    margin-bottom: 1rem;
    border-radius: 1rem;
    object-fit: cover;
  }
  
  .trixi-roadmap-image img {
  width: 1500px!important;

  object-fit: cover;
  object-position: top;
  margin-top:-100px!important;
}

}

.hero-image {
  position: absolute;
  bottom: -100px;
  right: 0;
  width: calc(100% + 100px);
  height: calc(100% + 100px);
  object-fit: cover;
}

#mobileMenu {
  top: 66px !important;
    border-radius: 0.75rem; 
}

#mobileMenu:hover {
  border-radius: 0.75rem!important;
}

  .roadmap-image {
    transform: translate(20%, 20%) scale(1.5); /* -30% = center + 20% right shift */
  }

html {
  scroll-behavior: smooth;
}

@media (max-width: 450px) {
  .logo {
    max-width: 150px !important;
  }
}

.logo-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0rem;
  white-space: nowrap;
  overflow-x: auto;
}

.logo-row img {
  flex-shrink: 0;
}
.logo-row::-webkit-scrollbar {
  display: none;
}
.logo-row {
  scrollbar-width: none;  /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}


@media (max-width: 767px) {
  h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;
	   font-size: 1.2rem!important;   
  }

  h3 span {
    white-space: nowrap;
    flex-shrink: 0;
	margin-left: -3px;
  }
  
  h3 svg {
    width: 1.2em;
    height: 1.2em;
  }


}

 h3 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.25rem;

  }
  
  .solana-blobs {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.solana-blobs svg.blob {
  position: absolute;
  width: 1000px;
  height: 1000px;
  fill: url(#solanaGradientIcon);
  filter: blur(160px) brightness(60%);
  opacity: 0.15;
  will-change: transform;
  animation:
    blobMorph 12s ease-in-out infinite alternate,
    blobDrift 24s ease-in-out infinite;
}

/* Base anchor positions */
.blob1 {
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.blob2 {
  top: 60%;
  right: 10%;
  animation-delay: 4s;
}

.blob3 {
  top: 30%;
  left: 50%;
  transform: translateX(-40%);
  animation-delay: 8s;
}

@keyframes blobDrift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  25% {
    transform: translate(30vw, -30vh) scale(1.05);
  }
  50% {
    transform: translate(-30vw, 30vh) scale(0.98);
  }
  75% {
    transform: translate(20vw, 20vh) scale(1.03);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes blobMorph {
  0% {
    d: path("M300,60C360,100,440,160,460,240C480,320,440,420,360,460C280,500,160,480,120,400C80,320,100,200,160,120C220,40,240,20,300,60Z");
  }
  50% {
    d: path("M320,80C400,100,460,180,440,260C420,340,340,400,260,420C180,440,100,420,100,340C100,260,180,180,240,140C300,100,280,60,320,80Z");
  }
  100% {
    d: path("M300,60C360,100,440,160,460,240C480,320,440,420,360,460C280,500,160,480,120,400C80,320,100,200,160,120C220,40,240,20,300,60Z");
  }
}

@media (min-width: 1024px) {
  .solana-blobs svg.blob {
    width: 1000px;
    height: 1000px;
  }
}

.scrolling-image-wrapper {
  height: 400px;
  position: relative;
  overflow: hidden;
}

.scrolling-image-container {
  position: absolute;
  top: 0;
  width: 100%;
  height: 10071px; /* 5036px * 2, for both images stacked */
  animation: scrollSeamless 20s linear infinite;
}

.scroll-img {
  width: 100%;
  height: auto;
  display: block;
}


@keyframes scrollSeamless {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-5036px);
  }
}

code {
  white-space: nowrap;
  overflow-x: auto;
  text-overflow: ellipsis;
  display: inline;
  vertical-align: baseline;
  max-width: 100%;
}

.fade-video {
  transition: opacity 1s ease;
  opacity: 1;
}

.fade-video.fade-out {
  opacity: 0;
}

/* Custom breakpoint override for header nav visibility */
@media (max-width: 940px) {
  .custom-nav {
    display: none !important;
  }

  .custom-menu-button {
    display: inline-flex !important;
  }

  #mobileMenu {
    display: block !important;
  }

  #mobileMenu.hidden {
    display: none !important;
  }
}

@media (min-width: 920px) {
  .custom-nav {
    display: flex !important;
  }

  .custom-menu-button {
    display: none !important;
  }

  #mobileMenu {
    display: none !important;
  }
}

.disabled-link {
  pointer-events: none;
  cursor: default;
}


.stars-wrapper {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #000;
  perspective: 340px;
  opacity:30%
}

.stars {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 2px;
  height: 2px;
  border-radius: 50%;
   box-shadow: 
   -907px -426px #fcfcfc, -1378px 341px #d1d1d1, 1331px 433px #e3e3e3, 1239px -469px #e3e3e3, 1393px -159px #d4d4d4, 761px 347px #cfcfcf, -1364px 93px #e8e8e8, -911px -162px #f2f2f2, 424px -327px #e3e3e3, 864px -14px #d4d4d4, 872px 207px #cfcfcf, -1012px -422px #fcfcfc, -65px 201px #fafafa, -495px -300px #dedede, 837px -289px #c2c2c2, -165px -478px #ededed, 572px -423px #cccccc, -580px -334px white, -882px 56px #e8e8e8, -359px -302px #ebebeb, -415px -307px #e8e8e8, 1151px 152px #c2c2c2, 265px -393px #e6e6e6, 962px 333px #cfcfcf, 1440px -6px #fafafa, -1253px 345px #f7f7f7, 462px -469px #fafafa, -1372px -298px #c2c2c2, -965px 193px #cccccc, -1321px -141px #c7c7c7, 836px -204px #f2f2f2, -680px 35px #d1d1d1, -839px 392px whitesmoke, -1072px -444px #d4d4d4, 937px -286px #e3e3e3, 360px -324px #c7c7c7, -70px 370px #c7c7c7, -715px 22px #dbdbdb, 85px 53px #d4d4d4, -980px 159px #f0f0f0, -1395px 358px #c9c9c9, -1210px 366px #c7c7c7, 481px -302px #e8e8e8, 1109px -42px #dedede, 700px 81px whitesmoke, -1246px -136px #c7c7c7, 823px -381px #e0e0e0, 169px 236px #d4d4d4, 424px 431px #fafafa, -1233px -341px #e0e0e0, -1042px 275px #dbdbdb, 547px -242px #e6e6e6, 677px -395px #f0f0f0, -1392px 332px #c4c4c4, -1185px -335px #c7c7c7, -174px 185px #f7f7f7, -512px -302px #d1d1d1, -856px 52px #c2c2c2, 745px 170px #f2f2f2, 83px -147px #c2c2c2, 381px -319px #f7f7f7, -119px -133px #fcfcfc, -561px -454px #d6d6d6, -885px 365px #e8e8e8, 1240px 116px #e6e6e6, -1430px -417px #e6e6e6, -681px 126px #f7f7f7, 751px 368px #fafafa, 429px 245px #cccccc, -1202px 381px #d6d6d6, -1173px -38px #ebebeb, -793px -257px #dbdbdb, -1171px 343px #c9c9c9, -838px 100px #f7f7f7, 892px 53px #cfcfcf, 777px -104px #e3e3e3, 477px -54px #e3e3e3, 186px 294px #fcfcfc, 1130px 273px #fafafa, -241px -454px #cccccc, 1302px -156px #d6d6d6, -500px 42px #c4c4c4, 1068px -50px #fcfcfc, 727px -114px #e3e3e3, -945px 235px #dedede, -1150px 11px #e0e0e0, 225px -140px #c2c2c2, 1130px -176px #c4c4c4, -800px 6px #e8e8e8, -1214px 224px #d6d6d6, -552px -227px #cccccc, -1424px -330px #cccccc, 369px -206px #d6d6d6, -1063px 62px #ebebeb, 411px -479px #ededed, -156px -97px #cccccc, -494px 430px #ededed, 626px -70px #f0f0f0, -136px -303px #dbdbdb, -767px -155px #ededed, 1228px -253px #d6d6d6, 875px -215px #cfcfcf, -795px 14px whitesmoke, -1486px 299px #e8e8e8, -1007px 380px #ebebeb, 1159px -192px white, 130px -385px #e3e3e3, 1283px 189px #cfcfcf, 21px 8px #e3e3e3, -1403px -366px #dedede, -924px 19px #fafafa, 636px 121px #f0f0f0, -890px -15px #f0f0f0, -961px 13px #c4c4c4, -80px -458px #cccccc, 48px -414px #ededed, -871px -379px white, -1129px -4px #cccccc, 1228px 339px #c9c9c9, 422px 115px #cfcfcf, 585px -96px #ededed, -761px -387px #d1d1d1, -1383px -45px #f2f2f2, -967px -386px whitesmoke, 731px 359px #d4d4d4, -589px 91px #c9c9c9, -460px -401px #d4d4d4, -1338px 287px #dbdbdb, 386px 84px #dbdbdb, 1414px 444px #d1d1d1, -877px 6px #d9d9d9, -1181px -365px #dedede, -523px -331px #dedede, 371px 102px #e0e0e0, -1237px 363px #d4d4d4, 1475px 338px #e8e8e8, -552px -314px #e3e3e3, 407px 387px #d6d6d6, 1230px 41px #fcfcfc, 1399px -220px #f7f7f7, 1054px -118px #e6e6e6, 42px 362px #c7c7c7, 651px -149px #fcfcfc, 135px 312px #cfcfcf, 1458px -395px #f0f0f0, -512px -185px #f7f7f7, -1234px -320px #dbdbdb, -178px 310px #c4c4c4, 526px 440px #fcfcfc, 952px 145px #d6d6d6, -109px -59px #c2c2c2, 1445px 89px whitesmoke, -886px 431px #cfcfcf, -505px 377px #f2f2f2, 1455px -416px #d9d9d9, -950px 291px #e3e3e3, -1245px 90px #f0f0f0, 1345px 397px #ebebeb, -952px -459px #d9d9d9, 296px 403px #cccccc, -639px -209px #f2f2f2, -1356px 371px #dedede, 362px -310px #c2c2c2, 944px 360px #cfcfcf, 379px -267px #d4d4d4, -1052px 237px #d4d4d4, -532px 181px #c2c2c2, 1178px 333px #e6e6e6, -1496px 232px #e0e0e0, -398px 280px #fafafa, 932px 472px #cccccc, 1448px -311px whitesmoke, -1253px -400px white, 27px -64px #d4d4d4, 975px -323px white, -238px -276px #d6d6d6, 1387px -216px #e0e0e0, 977px -29px #ededed, 877px -204px #c4c4c4, 727px 205px #cfcfcf, 83px 69px #e3e3e3, -1478px -440px #e6e6e6, -890px 150px #c9c9c9, -323px -26px #dbdbdb, 445px -160px #d9d9d9, 210px 281px #fafafa, 1366px -278px #e3e3e3, 685px 307px #f0f0f0, 315px 165px #e8e8e8, -980px 47px #ebebeb, -991px 84px #fafafa, -1151px 66px #fafafa, 22px -269px #d1d1d1, -976px -462px #d6d6d6, -1056px 113px #ededed, -714px -427px #e3e3e3, 93px 61px #e8e8e8, -563px 158px #d9d9d9, 1071px -102px #d6d6d6, 1293px -118px #dbdbdb, -820px -27px #e0e0e0, -571px -26px #c4c4c4, -1414px -218px #e0e0e0, -237px 128px #e6e6e6, 981px 167px #dbdbdb, 437px -333px #f7f7f7, 918px 417px #e6e6e6, 1249px -226px #fafafa, 1260px 66px #e0e0e0, 579px 291px #d9d9d9, -626px 315px white, 1220px -422px #ebebeb, 533px 237px #fafafa, -1217px -229px #c4c4c4, 622px -220px #e8e8e8, 801px 28px #e0e0e0, -1382px -109px #d9d9d9, -975px -450px #c7c7c7, 1299px -125px #cccccc, 440px 6px #cccccc, -93px -45px #d6d6d6, 132px 406px whitesmoke, -743px 432px #ededed, 333px -414px #d6d6d6, -400px 153px #d1d1d1, 1048px 260px #f2f2f2, 568px -70px #d9d9d9, 1130px -229px #c2c2c2, 574px 74px #cfcfcf, 1028px -28px #fafafa, -1422px 78px #e6e6e6, -770px -16px white, -421px 419px #d4d4d4, 744px 347px #e0e0e0, -470px 165px #e3e3e3, -575px 367px #d9d9d9, 385px -351px #f7f7f7, -1450px -366px #e6e6e6, -1361px -416px #c4c4c4, 884px 214px #ebebeb, 773px 270px #d4d4d4, -1118px -181px #fcfcfc, -1185px -45px #e8e8e8, 400px -36px #e6e6e6, -1006px 130px #c7c7c7, 1056px 235px #ededed, -160px 149px #cfcfcf, 334px 476px white, 1178px -362px #d6d6d6, 257px -134px #c9c9c9, 458px -64px #d1d1d1, 166px 82px #fafafa, -1090px -30px #fafafa, 1402px 210px #c2c2c2, 1062px -11px #fcfcfc, -773px -247px #fcfcfc, 1490px -7px #f2f2f2, 1364px 480px #c4c4c4, 87px 44px #d1d1d1, 1196px -247px #cfcfcf;
  animation: fly 9s linear infinite;
  transform-style: preserve-3d;
}
.stars:before, .stars:after {
  content: "";
  position: absolute;
  width: inherit;
  height: inherit;
  box-shadow: inherit;
    opacity: 0.2;
}
.stars:before {
  transform: translateZ(-300px);
  animation: fade1 9s linear infinite;
    opacity: 0.2;
}
.stars:after {
  transform: translateZ(-600px);
  animation: fade2 9s linear infinite;
    opacity: 0.2;
}

@keyframes fly {
  from {
    transform: translateZ(0px);
  }
  to {
    transform: translateZ(300px);
  }
}
@keyframes fade1 {
  from {
    opacity: .5;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade2 {
  from {
    opacity: 0;
  }
  to {
    opacity: .5;
  }
}
body {
  margin: 0;
}

.stars-wrapper {
  z-index: 1; /* Below noise-background (z-index: 99), above video background (z-index: -2) */
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: transparent;
  perspective: 340px;
  position: fixed;
  top: 0;
  left: 0;
}


.main-trixi-menu 
{
  z-index: 9999!important;
}


  @media (max-width: 550px) {
    #tabMenu {
      width: 100px !important;
    }
    #tabContent {
      padding: 1rem !important; /* Same as Tailwind's p-4 */
    }
      #tabMenu {
        width: 150px !important;
      }

      
    }
    @media (max-width: 550px) {
      .tab-btn {
        font-size: 0.85rem;
        padding: 0.25rem 0.5rem; /* Smaller padding */
        max-width: 100%;
      }
    }
    




.tab-btn.active {
  background: linear-gradient(90deg, #00FFA3, #03E1FF, #DC1FFF);
  color: white;
}


.tab-btn {
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.tab-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  padding: 2px;
  background: linear-gradient(90deg, #00FFA3, #03E1FF, #DC1FFF);
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: -1;
}

.tab-btn:hover::before {
  opacity: 1;
}

@media (max-width: 550px) {
  #tabContent {
    font-size: 0.95rem; /* text-sm */
  }
  
}

/*
.glass-header-bar {
  background-color: rgba(13, 14, 18, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

@media (max-width: 1200px) {
  .glass-header-bar {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .glass-header-inner {
    max-width: none !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    padding-left: 1.5rem; 
    padding-right: 1.5rem;
  }
}
  */

@media (max-width: 980px) {
  #mainHeader .custom-nav a:not(:first-child):not(:last-child) {
    padding-left: 0.75rem !important;  /* px-3 */
    padding-right: 0.75rem !important;
  }
}

#mainHeader {
  isolation: isolate;
}