@font-face {
  font-family: 'Jaro-Regular'; /* Ensure this name matches your font file */
  src: url('fonts/Jaro_36pt-Regular.ttf')

}

/*
  The `.frame` is the main container. We'll use a `grid` to center its content,
  and set its width to 100vw to fill the viewport.
*/
.frame {
  background-color: #ffffff;
  display: grid;
  justify-items: center;
  align-items: start;
  width: 100vw;
}

.frame .overlap-wrapper {
  background-color: #ffffff;
  overflow: hidden;
  width: 100vw; /* 1920px -> 100vw */
  height: 420vw; /* 8061px / 1920 * 100 = 420vw */
}

/*
  The `overlap` div seems to be a root container for all the pages.
  Its dimensions are scaled based on the 1920px design.
*/
.frame .overlap {
  position: relative;
  width: 130.313vw; /* 2502px / 1920 * 100 = 130.313vw */
  height: 420vw; /* 8062px / 1920 * 100 = 420vw */
  top: -0.052vw; /* -1px -> -0.052vw */
  left: -0.417vw; /* -8px -> -0.417vw */
}

/*
  Now, all sub-sections are also converted to relative `vw` units.
*/
.frame .GALLERY {
  position: absolute;
  width: 100.156vw; /* 1923px -> 100.156vw */
  height: 150.313vw; /* 2886px -> 150.313vw */
  top: 269.583vw; /* 5176px -> 269.583vw */
  left: 0.417vw; /* 8px -> 0.417vw */
}

.frame .overlap-group {
  position: relative;
  width: 100vw; /* 1920px -> 100vw */
  height: 150.313vw; /* 2886px -> 150.313vw */
}

.frame .hlf-background {
  height: 150.313vw; /* 2886px -> 150.313vw */
  top: 0;
  position: absolute;
  width: 99.948vw; /* 1919px -> 99.948vw */
  left: 0.052vw; /* 1px -> 0.052vw */
}

.frame .footer {
  position: absolute;
  width: 100vw; /* 1920px -> 100vw */
  height: 13.542vw; /* 260px -> 13.542vw */
  top: 136.771vw; /* 2626px -> 136.771vw */
  left: 0;
}

.frame .x {
  position: absolute;
  width: 5.729vw; /* 110px -> 5.729vw */
  height: 5.729vw; /* 110px -> 5.729vw */
  top: 140.677vw; /* 2701px -> 140.677vw */
  left: 43.073vw; /* 827px -> 43.073vw */
}

.frame .footer-x {
  height: 4.583vw; /* 88px -> 4.583vw */
  top: 1.146vw; /* 22px -> 1.146vw */
  left: 10vw;
  position: absolute;
  width: 5.729vw; /* 110px -> 5.729vw */
}

.frame .footer-discord {
  height: 5.729vw; /* 110px -> 5.729vw */
  top: 135.077vw; /* 2701px -> 140.677vw */
  left: 50vw; /* 959px -> 50vw */
  aspect-ratio: 1;
  object-fit: cover;
  position: absolute;
  width: 5.729vw; /* 110px -> 5.729vw */
}
/* Link kontejner za footer ikone */
.footer-icon-link {
  position: absolute;
  display: block;
  cursor: pointer;
  z-index: 10;
}

/* X: već imaš .frame .x sa pozicijom i dimenzijama – ostavi tako kako je */

/* Discord: prebacujemo poziciju na LINK (zamenjuje stari .frame .footer-discord blok) */
.frame .footer-icon-link {
  position: absolute;
  width: 5.729vw;      /* 110px -> 5.729vw */
  height: 5.729vw;
  top: 139.977vw;      /* kao ranije */
  left: 47vw;
}

/* Slike da popune kontejner + hover zoom */
.footer-icon-link img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .2s ease;
}

.footer-icon-link:hover img {
  transform: scale(1.12);
}

/* (Opcionalno) anuliraj stari layout na .footer-x/.footer-discord ako se kose */
.frame .footer-x,
.frame .footer-discord {
  top: 0; left: 0;
  width: 100%; height: 100%;
}


.frame .hlf-pattern {
  height: 115.052vw; /* 2209px -> 115.052vw */
  top: 3.073vw; /* 59px -> 3.073vw */
  aspect-ratio: 0.87;
  position: absolute;
  width: 99.948vw; /* 1919px -> 99.948vw */
  left: 0.052vw; /* 1px -> 0.052vw */
}

.frame .text-wrapper {
  position: absolute;
  width: 39.948vw; /* 767px -> 39.948vw */
  top: 14.896vw; /* 286px -> 14.896vw */
  left: 29.792vw; /* 572px -> 29.792vw */
  -webkit-text-stroke: 0.26vw; /* 5px -> 0.26vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #65ff00;
  font-size: 7.292vw; /* 140px -> 7.292vw */
  letter-spacing: 0;
  line-height: normal;
}

.frame .PAGE-HOW-TO-BUY {
  position: absolute;
  width: 100.156vw; /* 1923px -> 100.156vw */
  height: 74.948vw; /* 1439px -> 74.948vw */
  top: 211.458vw; /* 4060px -> 211.458vw */
  left: 0.417vw; /* 8px -> 0.417vw */
}

.frame .div {
  position: relative;
  width: 100vw; /* 1920px -> 100vw */
  height: 74.948vw; /* 1439px -> 74.948vw */
}

.frame .htb-gradient {
  position: absolute;
  width: 99.948vw; /* 1919px -> 99.948vw */
  height: 22.969vw; /* 441px -> 22.969vw */
  top: 51.979vw; /* 998px -> 51.979vw */
  left: 0.052vw; /* 1px -> 0.052vw */
}

.frame .htb-background {
  position: absolute;
  width: 100vw; /* 1920px -> 100vw */
  height: 58.125vw; /* 1116px -> 58.125vw */
  top: 0;
  left: 0;
}

.frame .wallet {
  position: absolute;
  width: 37.708vw; /* 724px -> 37.708vw */
  height: 11.719vw; /* 225px -> 11.719vw */
  top: 15vw; /* 288px -> 15vw */
  left: 22.865vw; /* 439px -> 22.865vw */
  background-image: url(./img/wallet.png);
  background-size: 100% 100%;
}

.frame .download-a-cardano {
  position: absolute;
  width: 33.802vw; /* 651px -> 33.802vw */
  top: 4.74vw; /* 91px -> 4.74vw */
  left: 2.031vw; /* 39px -> 2.031vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #fcff21;
  font-size: 1.771vw; /* 34px -> 1.771vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-2 {
  position: absolute;
  top: 1.25vw; /* 24px -> 1.25vw */
  left: 12.292vw; /* 236px -> 12.292vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #fcff21;
  font-size: 2.5vw; /* 48px -> 2.5vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .sum-ada {
  position: absolute;
  width: 37.708vw; /* 724px -> 37.708vw */
  height: 11.979vw; /* 230px -> 11.979vw */
  top: 24.635vw; /* 473px -> 24.635vw */
  left: 39.948vw; /* 767px -> 39.948vw */
}

.frame .overlap-group-2 {
  position: relative;
  height: 11.719vw; /* 225px -> 11.719vw */
  background-image: url(./img/sum-ada.png);
  background-size: 100% 100%;
}

.frame .p {
  position: absolute;
  width: 30.781vw; /* 591px -> 30.781vw */
  top: 4.74vw; /* 91px -> 4.74vw */
  left: 3.438vw; /* 66px -> 3.438vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #fcff21;
  font-size: 1.771vw; /* 34px -> 1.771vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-3 {
  position: absolute;
  top: 1.25vw; /* 24px -> 1.25vw */
  left: 11.771vw; /* 226px -> 11.771vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #fcff21;
  font-size: 2.5vw; /* 48px -> 2.5vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .swap {
  position: absolute;
  width: 37.708vw; /* 724px -> 37.708vw */
  height: 11.979vw; /* 230px -> 11.979vw */
  top: 34.427vw; /* 661px -> 34.427vw */
  left: 22.865vw; /* 439px -> 22.865vw */
}

.frame .overlap-2 {
  position: relative;
  height: 11.719vw; /* 225px -> 11.719vw */
  background-image: url(./img/swap.png);
  background-size: 100% 100%;
}

.frame .text-wrapper-4 {
  position: absolute;
  top: 1.25vw; /* 24px -> 1.25vw */
  left: 13.333vw; /* 256px -> 13.333vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #fcff21;
  font-size: 2.5vw; /* 48px -> 2.5vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .HOW-TO-BUY {
  position: absolute;
  width: 34.844vw; /* 669px -> 34.844vw */
  top: 3.594vw; /* 69px -> 3.594vw */
  left: 33.229vw; /* 638px -> 33.229vw */
  -webkit-text-stroke: 0.26vw; /* 5px -> 0.26vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #467898;
  font-size: 6.667vw; /* 128px -> 6.667vw */
  letter-spacing: 0;
  line-height: normal;
}

.frame .official-degenerate {
  position: absolute;
  width: 37.708vw; /* 724px -> 37.708vw */
  height: 11.979vw; /* 230px -> 11.979vw */
  top: 44.323vw; /* 851px -> 44.323vw */
  left: 39.948vw; /* 767px -> 39.948vw */
}

.frame .overlap-3 {
  position: relative;
  height: 11.719vw; /* 225px -> 11.719vw */
  background-image: url(./img/official-degenerate.png);
  background-size: 100% 100%;
}

.frame .text-wrapper-5 {
  position: absolute;
  width: 33.281vw; /* 639px -> 33.281vw */
  top: 4.74vw; /* 91px -> 4.74vw */
  left: 2.188vw; /* 42px -> 2.188vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #fcff21;
  font-size: 1.771vw; /* 34px -> 1.771vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-6 {
  position: absolute;
  top: 1.25vw; /* 24px -> 1.25vw */
  left: 4.167vw; /* 80px -> 4.167vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #fcff21;
  font-size: 2.5vw; /* 48px -> 2.5vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .PAGE-TOKENOMICS {
  position: absolute;
  width: 100.729vw; /* 1934px -> 100.729vw */
  height: 59.479vw; /* 1142px -> 59.479vw */
  top: 157.031vw; /* 3015px -> 157.031vw */
  left: 0.469vw; /* 9px -> 0.469vw */
}

.frame .overlap-4 {
  position: relative;
  width: 99.948vw; /* 1919px -> 99.948vw */
  height: 59.479vw; /* 1142px -> 59.479vw */
}

.frame .pizza-background {
  position: absolute;
  width: 99.948vw; /* 1919px -> 99.948vw */
  height: 56.25vw; /* 1080px -> 56.25vw */
  top: 0;
  left: 0;
}

.frame .pizza-gradient {
  position: absolute;
  width: 99.948vw; /* 1919px -> 99.948vw */
  height: 22.969vw; /* 441px -> 22.969vw */
  top: 36.51vw; /* 701px -> 36.51vw */
  left: 0;
}

.frame .pizza-up-right-sl {
  position: absolute;
  width: 20.104vw; /* 386px -> 20.104vw */
  height: 20.573vw; /* 395px -> 20.573vw */
  top: 12.396vw; /* 238px -> 12.396vw */
  left: 42.708vw; /* 820px -> 42.708vw */
}

.frame .pizza-down-sl {
  position: absolute;
  width: 40.365vw; /* 775px -> 40.365vw */
  height: 27.5vw; /* 528px -> 27.5vw */
  top: 26.51vw; /* 509px -> 26.51vw */
  left: 23.542vw; /* 452px -> 23.542vw */
}

.frame .pizza-up-left-sl {
  position: absolute;
  width: 20.99vw; /* 403px -> 20.99vw */
  height: 27.135vw; /* 521px -> 27.135vw */
  top: 12.135vw; /* 233px -> 12.135vw */
  left: 22.135vw; /* 425px -> 22.135vw */
}

.frame .starbite-sl {
  position: absolute;
  width: 11.823vw; /* 227px -> 11.823vw */
  height: 12.604vw; /* 242px -> 12.604vw */
  top: 38.438vw; /* 738px -> 38.438vw */
  left: 64.896vw; /* 1246px -> 64.896vw */
}

.frame .gum-full {
  position: absolute;
  width: 9.115vw; /* 175px -> 9.115vw */
  height: 5.208vw; /* 100px -> 5.208vw */
  top: 18.229vw; /* 350px -> 18.229vw */
  left: 71.458vw; /* 1372px -> 71.458vw */
}

.frame .gum-part {
  position: absolute;
  width: 4.01vw; /* 77px -> 4.01vw */
  height: 3.177vw; /* 61px -> 3.177vw */
  top: 28.438vw; /* 546px -> 28.438vw */
  left: 79.271vw; /* 1522px -> 79.271vw */
}

/* — zajednički stil: glatko uvećanje — */
.pizza-up-right-sl,
.pizza-down-sl,
.pizza-up-left-sl,
.star-full-sl,
.starbite-sl {
  transition: transform 0.25s ease;
  transform-origin: center center;
  cursor: pointer;
  will-change: transform;
}
.pizza-up-right-sl:hover,
.pizza-down-sl:hover,
.pizza-up-left-sl:hover,
.starbite-sl:hover {
    cursor:zoom-in;
  transform: scale(1.05);
}

/* — GUM je složen iz dva layer-a (color + stroke).
   Da se ne razdvoje, skaliramo ceo wrapper kad se hoveruje bilo koji sloj. — */
.GUM .overlap-group-3 {
  transition: transform 0.25s ease;
  transform-origin: center center;
  will-change: transform;
}
.GUM .gum-color,
.GUM .gum-stroke {
  cursor:zoom-in;
}

/* Hover na bilo kom sloju povećava ceo gum */
.GUM .overlap-group-3:hover {
    
  transform: scale(1.08);
}


.frame .pizza-up-left {
  position: absolute;
  width: 10.156vw; /* 195px -> 10.156vw */
  height: 4.792vw; /* 92px -> 4.792vw */
  top: 17.188vw; /* 330px -> 17.188vw */
  left: 17.865vw; /* 343px -> 17.865vw */
}

.frame .pizza-down {
  position: absolute;
  width: 10.156vw; /* 195px -> 10.156vw */
  height: 2.292vw; /* 44px -> 2.292vw */
  top: 44.219vw; /* 849px -> 44.219vw */
  left: 17.865vw; /* 343px -> 17.865vw */
}

.frame .pizza-up-right {
  position: absolute;
  width: 14.115vw; /* 271px -> 14.115vw */
  height: 3.333vw; /* 64px -> 3.333vw */
  top: 14.271vw; /* 274px -> 14.271vw */
  left: 54.271vw; /* 1042px -> 54.271vw */
}

.frame .star-full {
  position: absolute;
  width: 9.583vw; /* 184px -> 9.583vw */
  height: 1.406vw; /* 27px -> 1.406vw */
  top: 39.583vw; /* 760px -> 39.583vw */
  left: 70.677vw; /* 1357px -> 70.677vw */
}

.frame .star-bite {
  position: absolute;
  width: 8.594vw; /* 165px -> 8.594vw */
  height: 1.458vw; /* 28px -> 1.458vw */
  top: 46.563vw; /* 894px -> 46.563vw */
  left: 74.271vw; /* 1426px -> 74.271vw */
}

.frame .text-wrapper-7 {
  position: absolute;
  width: 7.083vw; /* 136px -> 7.083vw */
  top: 16.25vw; /* 312px -> 16.25vw */
  left: 10.365vw; /* 199px -> 10.365vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 1.667vw; /* 32px -> 1.667vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-8 {
  position: absolute;
  width: 8.333vw; /* 160px -> 8.333vw */
  top: 45.365vw; /* 871px -> 45.365vw */
  left: 9.271vw; /* 178px -> 9.271vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 1.667vw; /* 32px -> 1.667vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-9 {
  position: absolute;
  width: 8.177vw; /* 157px -> 8.177vw */
  top: 38.594vw; /* 741px -> 38.594vw */
  left: 81.25vw; /* 1560px -> 81.25vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 1.667vw; /* 32px -> 1.667vw */
  letter-spacing: 0;
  line-height: normal;
}

.frame .element-VESTED {
  position: absolute;
  width: 7.344vw; /* 141px -> 7.344vw */
  top: 46.771vw; /* 898px -> 46.771vw */
  left: 83.438vw; /* 1602px -> 83.438vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 1.667vw; /* 32px -> 1.667vw */
  letter-spacing: 0;
  line-height: normal;
}

.frame .element-LP {
  position: absolute;
  width: 5.26vw; /* 101px -> 5.26vw */
  top: 17.344vw; /* 333px -> 17.344vw */
  left: 81.25vw; /* 1560px -> 81.25vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 1.667vw; /* 32px -> 1.667vw */
  letter-spacing: 0;
  line-height: normal;
}

.frame .element-DEV {
  position: absolute;
  width: 5.573vw; /* 107px -> 5.573vw */
  top: 30.469vw; /* 585px -> 30.469vw */
  left: 73.125vw; /* 1404px -> 73.125vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 1.667vw; /* 32px -> 1.667vw */
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-10 {
  position: absolute;
  width: 7.344vw; /* 141px -> 7.344vw */
  top: 13.281vw; /* 255px -> 13.281vw */
  left: 68.646vw; /* 1318px -> 68.646vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 1.667vw; /* 32px -> 1.667vw */
  letter-spacing: 0;
  line-height: normal;
}

.frame .GUM {
  position: absolute;
  width: 23.646vw; /* 454px -> 23.646vw */
  height: 7.24vw; /* 139px -> 7.24vw */
  top: 21.302vw; /* 409px -> 21.302vw */
  left: 65.719vw; /* 1263px -> 65.719vw */
}

.frame .overlap-group-3 {
  position: relative;
  height: 7.24vw; /* 139px -> 7.24vw */
}

.frame .gum-color {
  position: absolute;
  width: 23.385vw; /* 449px -> 23.385vw */
  height: 7.083vw; /* 136px -> 7.083vw */
  top: 0.104vw; /* 2px -> 0.104vw */
  left: 0.104vw; /* 2px -> 0.104vw */
}

.frame .gum-stroke {
  position: absolute;
  width: 23.646vw; /* 454px -> 23.646vw */
  height: 7.24vw; /* 139px -> 7.24vw */
  top: 0;
  left: 0;
}

.frame .PAGE-ABOUT {
  position: absolute;
  width: 100.729vw; /* 1934px -> 100.729vw */
  height: 127.188vw; /* 2442px -> 127.188vw */
  top: 40.781vw; /* 783px -> 40.781vw */
  left: 0.417vw; /* 8px -> 0.417vw */
}

.frame .overlap-5 {
  position: relative;
  width: 100vw; /* 1920px -> 100vw */
  height: 126.927vw; /* 2437px -> 126.927vw */
}

.frame .starhead-pattern {
  position: absolute;
  width: 100vw; /* 1920px -> 100vw */
  height: 100.781vw; /* 1935px -> 100.781vw */
  top: 15.521vw; /* 298px -> 15.521vw */
  left: 0;
}

.frame .img {
  position: absolute;
  width: 100vw; /* 1920px -> 100vw */
  height: 117.5vw; /* 2256px -> 117.5vw */
  top: 0;
  left: 0;
  aspect-ratio: 0.85;
  object-fit: cover;
}

.frame .text-track {
  position: absolute;
  width: 100vw; /* 1920px -> 100vw */
  height: 3.906vw; /* 75px -> 3.906vw */
  top: 56.215vw; /* 298px -> 15.521vw */
  left: 0;
}

.frame .text-rect {
  height: 18.073vw; /* 347px -> 18.073vw */
  top: 39.219vw; /* 753px -> 39.219vw */
  position: absolute;
  width: 57.188vw; /* 1098px -> 57.188vw */
  left: 21.406vw; /* 411px -> 21.406vw */
}

.frame .text-rect-2 {
  height: 12.656vw; /* 243px -> 12.656vw */
  top: 59.688vw; /* 1146px -> 59.688vw */
  position: absolute;
  width: 57.188vw; /* 1098px -> 57.188vw */
  left: 21.406vw; /* 411px -> 21.406vw */
}

.frame .bebo-was-never-meant {
  position: absolute;
  top: 40.104vw; /* 770px -> 40.104vw */
  left: 34.74vw; /* 667px -> 34.74vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 2.083vw; /* 40px -> 2.083vw */
  letter-spacing: 0;
  line-height: normal;
}

.frame .TEXT {
  position: absolute;
  width: 55.521vw; /* 1066px -> 55.521vw */
  top: 46.25vw; /* 888px -> 46.25vw */
  left: 22.24vw; /* 427px -> 22.24vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 1.875vw; /* 36px -> 1.875vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .TEXT-2 {
  position: absolute;
  width: 53.75vw; /* 1032px -> 53.75vw */
  top: 61.406vw; /* 1179px -> 61.406vw */
  left: 23.49vw; /* 451px -> 23.49vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 1.875vw; /* 36px -> 1.875vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-rect-3 {
  height: 11.094vw; /* 213px -> 11.094vw */
  top: 92.188vw; /* 1770px -> 92.188vw */
  position: absolute;
  width: 57.188vw; /* 1098px -> 57.188vw */
  left: 21.406vw; /* 411px -> 21.406vw */
}

.frame .TEXT-3 {
  position: absolute;
  width: 53.75vw; /* 1032px -> 53.75vw */
  top: 93.177vw; /* 1789px -> 93.177vw */
  left: 23.125vw; /* 444px -> 23.125vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 1.875vw; /* 36px -> 1.875vw */
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-11 {
  position: absolute;
  width: 49.115vw; /* 943px -> 49.115vw */
  top: 26.919vw; /* 513px -> 26.719vw */
  left: 27.027vw; /* 469px -> 24.427vw */
  -webkit-text-stroke: 0.26vw; /* 5px -> 0.26vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #65ff00;
  font-size: 7.292vw; /* 140px -> 7.292vw */
  letter-spacing: 0;
  line-height: normal;
}

.frame .disgusting {
  position: absolute;
  width: 27.396vw; /* 526px -> 27.396vw */
  top: 73.333vw; /* 1408px -> 73.333vw */
  left: 36.854vw; /* 693px -> 36.094vw */
  -webkit-text-stroke: 0.208vw; /* 4px -> 0.208vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #65ff00;
  font-size: 3.75vw; /* 72px -> 3.75vw */
  text-align: center;
  letter-spacing: 0;
  line-height: 4.167vw; /* 80px -> 4.167vw */
}

.frame .DEV-ALLOCATION {
  position: absolute;
  width: 54.115vw; /* 1039px -> 54.115vw */
  top: 110.781vw; /* 2127px -> 110.781vw */
  left: 22.656vw; /* 435px -> 22.656vw */
  -webkit-text-stroke: 0.26vw; /* 5px -> 0.26vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #65ff00;
  font-size: 6.667vw; /* 128px -> 6.667vw */
  text-align: center;
  letter-spacing: 0;
  line-height: 6.25vw; /* 120px -> 6.25vw */
}

.frame .HOME-PAGE {
  position: absolute;
  width: 130.313vw; /* 2502px -> 130.313vw */
  height: 60.313vw; /* 1158px -> 60.313vw */
  top: 0;
  left: 0;
}

.frame .overlap-6 {
  position: relative;
  width: 129.375vw; /* 2484px -> 129.375vw */
  height: 60.26vw; /* 1157px -> 60.26vw */
  top: 0.052vw; /* 1px -> 0.052vw */
  left: 0.417vw; /* 8px -> 0.417vw */
}

.frame .HOME-PAGE-2 {
  position: absolute;
  width: 100vw; /* 1920px -> 100vw */
  height: 56.25vw; /* 1080px -> 56.25vw */
  top: 0;
  left: 0;
  background-image: url(./img/night-background.png);
  background-size: cover;
  background-position: 50% 50%;
}

.STAR-DONUT {
  position: absolute;
  width: 18.698vw; 
  height: 19.948vw;
  top: 9.792vw; 
  left: 61.615vw;

  animation: float 3s ease-in-out infinite;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0.5vw);   /* početna pozicija */
  }
  50% {
    transform: translateY(-0.6vw); /* podigni malo na gore */
  }
}


.frame .overlap-group-4 {
  position: relative;
  height: 19.948vw; /* 383px -> 19.948vw */
}

.frame .star-donut-color {
  position: absolute;
  width: 18.646vw; /* 358px -> 18.646vw */
  height: 19.896vw; /* 382px -> 19.896vw */
  top: 0.052vw; /* 1px -> 0.052vw */
  left: 0.052vw; /* 1px -> 0.052vw */
}

.frame .star-donut-stroke {
  position: absolute;
  width: 18.698vw; /* 359px -> 18.698vw */
  height: 19.948vw; /* 383px -> 19.948vw */
  top: 0;
  left: 0;
}

.frame .SHOP {
  position: absolute;
  width: 100vw; /* 1920px -> 100vw */
  height: 41.875vw; /* 804px -> 41.875vw */
  top: 18.385vw; /* 353px -> 18.385vw */
  left: 0;
}

.frame .overlap-7 {
  position: relative;
  height: 41.875vw; /* 804px -> 41.875vw */
}

.frame .shop-scene-color {
  position: absolute;
  width: 100vw; /* 1920px -> 100vw */
  height: 37.708vw; /* 724px -> 37.708vw */
  top: 0.104vw; /* 2px -> 0.104vw */
  left: 0;
}

.frame .shop-roof {
  position: absolute;
  width: 40.729vw; /* 782px -> 40.729vw */
  height: 29.792vw; /* 572px -> 29.792vw */
  top: 4.167vw; /* 80px -> 4.167vw */
  left: 59.271vw; /* 1138px -> 59.271vw */
}

.frame .shop-inner-light {
  position: absolute;
  width: 25.104vw; /* 482px -> 25.104vw */
  height: 19.219vw; /* 369px -> 19.219vw */
  top: 14.844vw; /* 285px -> 14.844vw */
  left: 57.083vw; /* 1096px -> 57.083vw */
}

.frame .shop-poster-color {
  position: absolute;
  width: 14.01vw; /* 269px -> 14.01vw */
  height: 5.208vw; /* 100px -> 5.208vw */
  top: 22.656vw; /* 435px -> 22.656vw */
  left: 62.344vw; /* 1197px -> 62.344vw */
}

.frame .shop-light {
  position: absolute;
  width: 53.125vw; /* 1020px -> 53.125vw */
  height: 21.2vw; /* 409px -> 21.2vw */
  top: 20.573vw; /* 395px -> 20.573vw */
  left: 22.708vw; /* 436px -> 22.708vw */
}

.frame .shop-stroke {
  position: absolute;
  width: 100vw; /* 1920px -> 100vw */
  height: 37.813vw; /* 726px -> 37.813vw */
  top: 0;
  left: 0;
}


/* Kontejner znaka – ima dimenzije i prima hover */
.frame .BUY-NOW-LIGHT {
  position: absolute;
  width: 26.667vw;
  height: 24.01vw;
  top: 15.573vw;
  left: 14.271vw;
  
}

/* Klik zona koja pokriva ceo znak */
.buy-now-hit {
  position: absolute;
  inset: 0;
  display: block;
  cursor: pointer;
  z-index: 20;        /* iznad slika, prima hover/klik */
  background: transparent;
}

/* Glow slika je uvek vidljiva, ali miruje */
.dot-glow-buysign {
  position: absolute;
  width: 26.667vw;
  height: 19.375vw;
  top: 0;
  left: 0;
  opacity: 1;
  transition: transform 0.2s ease;
  pointer-events: none;  /* da ne blokira hover klik zone */
  z-index: 10;
}

/* POKRETANJE TREPERENJA – na hover kontejnera ili klik zone */
.BUY-NOW-LIGHT:hover .dot-glow-buysign,
.buy-now-hit:hover ~ .overlap-8 .dot-glow-buysign {
  animation: blink-dot 1.2s ease-in-out infinite;
}

@keyframes blink-dot {
    100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.05); }
}


/* Klik zona - ceo znak je link */
.buy-now-link {
  display: inline-block;
  position: relative;
  cursor: pointer;
  text-decoration: none;
}

/* Slika glow-a uvek vidljiva */
.dot-glow-buysign {
  opacity: 1;
  transition: transform 0.2s ease, opacity 0.2s ease;
  pointer-events: none; /* da ne blokira hover */
  z-index: 5;
  position: relative;
}

/* Kada hoveruješ BUY NOW znak */
.buy-now-link:hover .dot-glow-buysign {
  animation: blink-dot 1.2s ease-in-out infinite;
}

/* Animacija treperenja */
@keyframes blink-dot {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.5;          /* lagano zatamni */
    transform: scale(1.05); /* blago pulsiranje */
  }
}

.frame .overlap-8 {
  position: relative;
  height: 24.01vw; /* 461px -> 24.01vw */
}

.frame .yellow-buysign {
  position: absolute;
  width: 23.333vw; /* 448px -> 23.333vw */
  height: 20.833vw; /* 400px -> 20.833vw */
  top: 2.708vw; /* 52px -> 2.708vw */
  left: 0.573vw; /* 11px -> 0.573vw */
}

.frame .buy-now-color {
  position: absolute;
  width: 16.927vw; /* 325px -> 16.927vw */
  height: 5.417vw; /* 104px -> 5.417vw */
  top: 4.74vw; /* 91px -> 4.74vw */
  left: 5.104vw; /* 98px -> 5.104vw */
}

.frame .buy-now-stroke {
  position: absolute;
  width: 23.542vw; /* 452px -> 23.542vw */
  height: 21.406vw; /* 411px -> 21.406vw */
  top: 2.604vw; /* 50px -> 2.604vw */
  left: 0.417vw; /* 8px -> 0.417vw */
}

.frame .dot-glow-buysign {
  position: absolute;
  width: 26.667vw; /* 512px -> 26.667vw */
  height: 19.375vw; /* 372px -> 19.375vw */
  top: 0;
  left: 0;
}

.frame .header {
  position: absolute;
  width: 85.365vw; /* 1639px -> 85.365vw */
  height: 14.844vw; /* 285px -> 14.844vw */
  top: 0.473vw; /* 11px -> 0.573vw */
  left: 7.29vw; /* 163px -> 8.49vw */
}
.header-wrapper {
  position: fixed;   /* stalno zalepljen */
  top: 0;
  left: 0;
  height: 0;
  width: 100%;
  z-index: 997;     /* da uvek bude iznad ostalih elemenata */
  background: transparent;  /* ili neka providnost: rgba(255,255,255,0.9) */
}



/* Linkovi */
.main-header a {
  color: #fff;
  text-decoration: none;
  transition: transform 0.25s ease;
}

/* Hover efekat */
.main-header a:hover {
  transform: scale(1.1);
  color: #ff0; /* ako želiš da menja boju */
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}
.PAGE-ABOUT{
  scroll-margin-top: -12vw;   /* približno visina header zone u vw */
}

.PAGE-TOKENOMICS{
    scroll-margin-top: 22vw;
}

.HOW-TO-BUY{
    scroll-margin-top: 15vw;
}
/*
.frame .discord-social {
  position: absolute;
  width: 2.033vw; 
  height: 2.033vw;
  top: 5.265vw; 
  left: 84.635vw; 
  aspect-ratio: 1;
  object-fit: cover;
  z-index: 999;
}
*/
.frame .text-wrapper-12 {
  position: absolute;
  width: 8.646vw; /* 166px -> 8.646vw */
  top: 5.938vw; /* 114px -> 5.938vw */
  left: 60.625vw; /* 1164px -> 60.625vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 1.667vw; /* 32px -> 1.667vw */
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-13 {
  position: absolute;
  width: 5.938vw; /* 114px -> 5.938vw */
  top: 5.938vw; /* 114px -> 5.938vw */
  left: 72.135vw; /* 1385px -> 72.135vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 1.667vw; /* 32px -> 1.667vw */
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-14 {
  position: absolute;
  width: 11.875vw; /* 228px -> 11.875vw */
  top: 5.938vw; /* 114px -> 5.938vw */
  left: 30.365vw; /* 583px -> 30.365vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 1.667vw; /* 32px -> 1.667vw */
  letter-spacing: 0;
  line-height: normal;
}

.frame .text-wrapper-15 {
  position: absolute;
  width: 4.635vw; /* 89px -> 4.635vw */
  top: 5.938vw; /* 114px -> 5.938vw */
  left: 21.979vw; /* 422px -> 21.979vw */
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 1.667vw; /* 32px -> 1.667vw */
  letter-spacing: 0;
  line-height: normal;
}

.text-wrapper-16 {
  position: absolute;
  width: 200%; /* duplo veća da ima prostora */
  top: 56.55vw; 
  left: 0;
  font-family: "Jaro-Regular", Helvetica;
  font-weight: 400;
  color: #000000;
  font-size: 3.125vw; 
  white-space: nowrap; /* da se ne lomi tekst */
  overflow: hidden;
  animation: scrollText 20s linear infinite;
}

@keyframes scrollText {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}


.frame .noglow {
  position: absolute;
  width: 18.229vw; /* 350px -> 18.229vw */
  height: 18.229vw; /* 350px -> 18.229vw */
  top: 24.115vw; /* 463px -> 24.115vw */
  left: 57.083vw; /* 1096px -> 57.083vw */
  aspect-ratio: 1;
  object-fit: cover;
}

.frame .pee {
  position: absolute;
  width: 99.792vw; /* 1916px -> 99.792vw */
  height: 56.615vw; /* 1087px -> 56.615vw */
  top: 0;
  left: 0;
  aspect-ratio: 1.78;
  object-fit: cover;
}

.frame .character-stand {
  position: absolute;
  width: 13.438vw; 
  height: 28.125vw; 
  top: 28.073vw; 
  left: 21.771vw;
z-index: 40;
}

.frame .character-drink {
  position: absolute;
  width: 11.979vw; 
  height: 28.073vw; 
  top: 28.125vw; 
  left: 21.979vw; 
  z-index: 40;
}


.character-drink {
  opacity: 0;
  transition: opacity 0.2s ease-in-out;
  pointer-events: none; 
}

.character-stand {
  opacity: 1;
  transition: opacity 0.2s ease-in-out;
}


.character-stand:hover {
  opacity: 0;
}

.character-stand:hover + .character-drink {
  opacity: 1;
}


.frame .discord-social-wrapper {
  position: absolute;
  width: 3.333vw; /* 64px -> 3.333vw */
  height: 3.333vw; /* 64px -> 3.333vw */
  top: 4.665vw; 
  left: 82.635vw; 
  z-index:999;
}

.frame .discord-social {
  position: absolute;
  width: 3.333vw; /* 64px -> 3.333vw */
  height: 3.333vw; /* 51px -> 2.656vw */
  top: 0.677vw; /* 13px -> 0.677vw */
  left: 0;
}

.frame .x-social-wrapper {
  position: absolute;
  width: 3.333vw; /* 64px -> 3.333vw */
  height: 3.333vw; /* 64px -> 3.333vw */
  top: 5.465vw; /* 103px -> 5.365vw */
  left: 14.271vw; /* 274px -> 14.271vw */
  z-index:999;
}

.frame .x-social {
  position: absolute;
  width: 3.333vw; /* 64px -> 3.333vw */
  height: 2.656vw; /* 51px -> 2.656vw */
  top: 0.677vw; /* 13px -> 0.677vw */
  left: 0;
}

.frame .placeholder {
  position: absolute;
  width: 30.417vw; /* 584px -> 30.417vw */
  height: 30.365vw; /* 583px -> 30.365vw */
  top: 285.229vw; /* 5726px -> 298.229vw */
  left: 51vw; /* 979px -> 51vw */
}

.frame .gallery-placeholder {
  position: absolute;
  width: 30.417vw; /* 584px -> 30.417vw */
  height: 30.365vw; /* 583px -> 30.365vw */
  top: 285.229vw; /* 5726px -> 298.229vw */
  left: 19.427vw; /* 373px -> 19.427vw */
}

.frame .anim-placeholder {
  position: absolute;
  width: 61.979vw; /* 1190px -> 61.979vw */
  height: 34.896vw; /* 670px -> 34.896vw */
  top: 326.635vw; /* 6329px -> 329.635vw */
  left: 19.427vw; /* 373px -> 19.427vw */
}

.frame .anim-placeholder {
  /* već imaš width/height/top/left u CSS-u */
  object-fit: cover;   /* da ispuni okvir bez razvlačenja */
  background: #000;    /* crna pozadina oko videa dok se ne učita */
  border-radius: 1vw;  /* opciono, ako želiš kao na galeriji */
  outline: 0.4vw solid #000; /* opciono “stroke” kao na slikama */
}


.frame .chart-placeholder {
  position: absolute;
  width: 61.979vw; /* 1190px -> 61.979vw */
  height: 34.896vw; /* 670px -> 34.896vw */
  top: 361.26vw; /* 7019px -> 365.26vw */
  left: 19.427vw; /* 373px -> 19.427vw */
}

.carousel {
  position: relative;
  top: 298vw;
  left: -14.63vw;
  width: 82vw;      /* širina vidljivog prozora */
  height: 25vw;     /* visina slika */
  margin: auto;
  overflow: hidden;
}

.carousel-track {
  display: flex;
  gap: 2vw; /* razmak između slika */
  transition: transform 0.6s ease-in-out;
}

.carousel-track img {
  width: 40.01vw;   /* dve slike + gap ≈ 80vw */
  height: 25vw;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 1vw; /* lepši izgled */
  border: 0.4vw solid #000;   /* bela linija oko slike */
}


/* Strelice */
.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  font-size: 2vw;
  padding: 0.5vw 1vw;
  cursor: pointer;
  z-index: 5;
}
.carousel-btn:hover {
  background: rgba(0,0,0,0.8);
}
.carousel-btn.prev { left: 1vw; }
.carousel-btn.next { right: 1vw; }

/* Pomoćna promenljiva za gap da bi JS mogao tačno da računa */
:root { --carousel-gap: 2vw; }

.carousel-track { gap: var(--carousel-gap); }



.audio-toggle{
  position: absolute;
  top: 0.7vw;         /* poravnaj sa ikonama; po potrebi dotegni */
  left: 96vw;       /* malo desno od Discord/X ikone */
  width: 2.8vw;
  height: 2.8vw;
  border-radius: 50%;
  border: 0.15vw solid #000;
  background: #fff;
  font-size: 1.6vw;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 1000;      /* iznad ostalog */
  transition: transform .15s ease, box-shadow .15s ease;
}
.audio-toggle:hover{ transform: scale(1.06); box-shadow: 0 0.4vw 1vw rgba(0,0,0,.15); }
.audio-toggle:active{ transform: scale(0.98); }


/* ==== HEADLINE STROKE (Chrome/Safari + Firefox fallback) ==== */
.frame .text-wrapper,        /* HALL OF FILTH */
.frame .HOW-TO-BUY,          /* HOW TO BUY */
.frame .text-wrapper-11,     /* THE FALLEN STAR */
.frame .DEV-ALLOCATION,      /* DEV ALLOCATION / TOKENOMICS */
.frame .disgusting          /* Disgusting? Absolutely... */
{
  /* Podesive varijable */
  --stroke-color: #000;         /* boja konture */
  --stroke-width: 0.2vw;       /* debljina konture (default) */

  /* WebKit/Blink */
  -webkit-text-stroke: var(--stroke-width) var(--stroke-color);

  /* Firefox fallback – “lažni” stroke preko senki u 8 smerova */
  text-shadow:
    0 calc(var(--stroke-width)) var(--stroke-color),
    0 calc(var(--stroke-width) * -1) var(--stroke-color),
    calc(var(--stroke-width)) 0 var(--stroke-color),
    calc(var(--stroke-width) * -1) 0 var(--stroke-color),
    calc(var(--stroke-width) * 0.707) calc(var(--stroke-width) * 0.707) var(--stroke-color),
    calc(var(--stroke-width) * -0.707) calc(var(--stroke-width) * 0.707) var(--stroke-color),
    calc(var(--stroke-width) * 0.707) calc(var(--stroke-width) * -0.707) var(--stroke-color),
    calc(var(--stroke-width) * -0.707) calc(var(--stroke-width) * -0.707) var(--stroke-color);
}

/* Zadrži originalne debljine gdje su bile drugačije */
.frame .disgusting { --stroke-width: 0.1vw; }  /* imao si 0.208vw ovdje */

/* (Opcionalno) ako NE želiš stroke na tekućem baneru, izbriši .text-wrapper-16 iz selektora gore */


/* DexHunter kontejner – poravnat sa videom i odmah ispod */
.dexhunter-wrap {
  position: absolute;
  width: 61.979vw;       /* isto kao video širina */
  left: 19.427vw;        /* isto kao video leva margina */
  top: 365vw;
  /*        ^ top videa  + visina videa + mali razmak */
  z-index: 50;
  padding: 1.2vw 0;
}

/* Poravnaj widget u sredinu tog okvira */
.dexhunter-wrap #dexhunter-root {
  display: flex;
  justify-content: center;
}