@font-face {
  font-family: "Etar RNIDS-Italic";
  src: url("fonts/EtarRNIDS-Italic.otf") format("truetype");
}
@font-face {
  font-family: "Etar RNIDS-Bold";
  src: url("fonts/EtarRNIDS-Bold.otf") format("truetype");
}

*, *::before, *::after { box-sizing: border-box; }

body #mesh{
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;           
  display: block;
  background: #162f29 !important;  
  z-index: 0;
  pointer-events: none;
  opacity: 1 !important;
  filter: none !important;
}

.tradingplatform {
  width: 100vw;
  height: 56.25vw; 
  position: relative;
  z-index: 1;
  
}

.tradingplatform .logo {
  position: absolute;
  width: 20.05%;
  height: 25.46%;
  top: 15.46%;
  left: 39.95%;
  background-image: url(./img/logo.svg);
  background-size: 100% 100%;
}
.tradingplatform .AXO {
  position: absolute;
  width: 21.46%;
  height: 20.28%;
  top: 31.94%;
  left: 39.27%;
  background-image: url(./img/AXO.svg);
  background-size: 100% 100%;
}
.tradingplatform .TRADING-PLATFORM {
  position: absolute;
  width: 41.61%;
  height: 15.56%;
  top: 43.98%;
  left: 29.17%;
  background-image: url(./img/TRADINGPLATFORM.svg);
  background-size: 100% 100%;
}
.tradingplatform .lightning-fast {
  position: absolute;
  width: 17.97%;
  height: 18.43%;
  top: 57.96%;
  left: 28.44%;
  background-image: url(./img/light.svg);
  background-size: 100% 100%;
}
.tradingplatform .the-future-of {
  position: absolute;
  width: 35.47%;
  height: 19.26%;
  top: 49.91%;
  left: 32.24%;
  box-shadow: 0vw 0.208vw 0.208vw #00000040;
  background-image: url(./img/future.svg);
  background-size: 100% 100%;
}
.tradingplatform .zero-gas-fees {
  position: absolute;
  width: 17.92%;
  height: 18.43%;
  top: 57.96%;
  left: 41.41%;
  background-image: url(./img/zero.svg);
  background-size: 100% 100%;
}
.tradingplatform .frame {
  position: absolute; 
  top: 40.70%;
  left: 26.45%;
  width: 6.40%;
  height: 13.57%;
  background-image: url(./img/zerod.png);
  background-size: 100% 100%;
}



.fully-scalable .scalvc {
  position: absolute;
  width:1.4vw;
  top: 4.3vw;
  left:4.7vw;
}

.tradingplatform .zeroj {
  position: absolute;
  width: 61.71%;
  height: 51.96%;
  top: 31.05%;
  left: 18.50%;
}

.tradingplatform .fully-scalable {
  position: absolute;
  width: 17.97%;
  height: 18.43%;
  top: 57.96%;
  left: 54.22%;
  background-image: url(./img/scallable.svg); 
  background-size: 100% 100%;
}

.tradingplatform .group-wrapper {
  position: absolute;

  top: 65.93%;
  left: 32.97%;
   width: 1.5vw;  
  height: 12vw;  
  overflow: visible;
}
.tradingplatform .group {
  position: relative;
  width: 100%;
  height: 100%;
}
.tradingplatform .ligd {
  position: absolute;
  width: 95.08%;
  height: 84.14%;
  top: -4.7vw;
  left: 0;
}
.tradingplatform .ligj {
  position: absolute;
  width: 59.62%;
  height: 41.98%;
  top: -1.9vw;
  left: 40.38%;
}
.tradingplatform .img {
  position: absolute;
  width: 10vw;
  height: auto;
  top: 65.93%;
  left: 59.01%;
}

.tradingplatform .email {
  position: absolute;
  top: 42.969vw;   
  left: 33.958vw; 
  width: 32.813vw; 
  height: 4.792vw; 
  background-image: url(./img/mail.svg);
  background-size: 100% 100%;
}
.tradingplatform .text-wrapper {
  position: absolute;
  width: 38.57%;
  height: 23.91%;
  top: 35.87%;
  left: 30.63%;
  font-family: "Etar RNIDS-Italic", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: italic;
  color: #5cc7a4;
  font-size: 0.938vw;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;

  outline: none;
  cursor: text;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-shadow: 0 0.104vw 0.208vw rgba(92, 199, 164, 0.35);
}

#email-text:empty::before {
  content: attr(data-placeholder);
  color: #5cc7a4;
  opacity: 0.7;
}

#email-text.invalid {
  box-shadow: 0 0 0 0.12vw rgba(255, 80, 80, 0.8);
  border-radius: 0.25vw;
}
@keyframes shake {
  10%, 90% { transform: translateX(-0.2vw); }
  20%, 80% { transform: translateX(0.4vw); }
  30%, 50%, 70% { transform: translateX(-0.6vw); }
  40%, 60% { transform: translateX(0.6vw); }
}
#email-text.shake { animation: shake 0.35s linear; }


.tradingplatform .earlyacess {
  position: absolute;
  top: 46.354vw;  
  left: 34.063vw; 
  width: 32.604vw; 
  height: 5.469vw; 
  background: transparent url(./img/earlyacess.svg) no-repeat center / 100% 100%;
  border: none;
  outline: none;
  padding: 0;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  display: block;
}
.tradingplatform .earlyacess:focus,
.tradingplatform .earlyacess:focus-visible {
  outline: none;
  box-shadow: none;
}
.tradingplatform .earlyacess:disabled {
  filter: grayscale(30%) brightness(0.85);
  cursor: not-allowed;
}
.tradingplatform .earlyacess.is-loading { opacity: 0.85; }


.tradingplatform .earlyacess .div {
  position: absolute;
  top: 45%;
  left: 0;
  width: 100%;
  height: auto;
  transform: translateY(-50%);
  white-space: nowrap;      
  text-align: center;
  letter-spacing: 0.06em;

  font-family: "Etar RNIDS-Bold", Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 1.25vw;        
  line-height: 1;
  text-shadow: 0 0.104vw 0.208vw rgba(0, 0, 0, 0.35);
}


.tradingplatform .p {
  position: absolute;
  width: 47.14%;
  height: 2.04%;
  top: 84.11%;
  left: 26.77%;
  text-shadow: 0vw 0.208vw 0.208vw 0.208vw #000000cf;
  font-family: "Etar RNIDS-Italic", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-style: italic;
  color: #ffffff;
  font-size: 0.938vw;
  text-align: center;
  letter-spacing: 0;
  line-height: normal;
}


 
.tradingplatform .telegram-btn {
  position: absolute;
  top: 53.3vw;       
  left: 50%;         
  transform: translateX(-50%);
  width: 20vw;        
  height: 3.2vw;    
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.8vw;
 
  text-decoration: none;
  cursor: pointer;
  background: #162f29;                    
  border: 0.08vw solid rgba(255,255,255,0.18);
  border-radius: 0.6vw;
  box-shadow: 0 0.26vw 0.78vw rgba(0,0,0,0.35), inset 0 0.13vw 0.39vw rgba(255,255,255,0.08);

  transition: transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
}

.tradingplatform .telegram-btn:hover {
  transform: translateX(-50%) translateY(-0.12vw);
  box-shadow: 0 0.39vw 1.2vw rgba(0,0,0,0.45);
  border-color: rgba(255,255,255,0.28);
}

.tradingplatform .telegram-btn:active {
  transform: translateX(-50%) translateY(0.04vw);
  filter: brightness(0.96);
}

.tradingplatform .telegram-btn:focus-visible {
  outline: none;
  box-shadow:
    0 0.39vw 1.2vw rgba(0,0,0,0.45),
    0 0 0 0.18vw rgba(92,199,164,0.55); 
}


.tradingplatform .telegram-btn > span {
  font-family: "Etar RNIDS-Bold", Helvetica, Arial, sans-serif;
  font-weight: 700;
  color: #ffffff;
  font-size: 1.05vw;   
  line-height: 1;
  letter-spacing: 0.06em;
  text-shadow: 0 0.104vw 0.208vw rgba(0, 0, 0, 0.35);
  white-space: nowrap;
}


.tradingplatform .telegram-btn .telegram-icon {
  height: 1.4vw;
  width: auto;
  display: inline-block;
  filter: drop-shadow(0 0.08vw 0.18vw rgba(0,0,0,0.35));
}


@media (max-aspect-ratio: 16/10) {
  .tradingplatform .telegram-btn { width: 26vw; height: 4.6vw; }
  .tradingplatform .telegram-btn > span { font-size: 1.15vw; }
  .tradingplatform .telegram-btn .telegram-icon { height: 1.6vw; }
}


.tradingplatform {
  height: calc(56.25vw + 5vw) !important; 
  transform: none !important;               
  margin-bottom: 0 !important;             
}


.tradingplatform .telegram-btn {
  top: 55.5vw !important;  
}




:root {
  --hero-shift: 10vw; 
}

html, body {
  margin-top:-5vw;
  height: 100%;
 
}
/* Dekorativni slojevi ne hvataju klikove */
.tradingplatform .logo,
.tradingplatform .AXO,
.tradingplatform .TRADING-PLATFORM,
.tradingplatform .lightning-fast,
.tradingplatform .the-future-of,
.tradingplatform .zero-gas-fees,
.tradingplatform .frame,
.tradingplatform .fully-scalable,
.tradingplatform .group-wrapper,
.tradingplatform .ligd,
.tradingplatform .ligj,
.tradingplatform .img {
  pointer-events: none;
}

/* Neka samo kontejner i samo polje primaju klikove */
.tradingplatform .email {
  z-index: 20;        /* iznad dekoracije */
  pointer-events: auto;
}

#email-text {
  z-index: 21;        /* iznad pozadine inputa */
  pointer-events: auto;
}

/* Pseudo-element placeholder da ne blokira klik */
#email-text:empty::before {
  pointer-events: none;
}