@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

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

:root {
  --page-default-background: #000000;
  --primary-color: #8763ff;
  --secondary-color: #a2b0ff;
  --gray-p-color: #909090;
  --header-color: #C6C6C6;
  --gray-bg-color: #191919;
  --dark-teal-bg: #001B1D;
  --featureC-borderradius: 1.5vw;
  --font-primary: 'Inter', 'Arial';
  --h1-font-size: 4.9vw;      /* ~61.04px */
  --h2-font-size: 3.33vw;      /* ~48.83px */
  --h3-font-size: 2.57vw;      /* ~39.06px */
  --h4-font-size: 2vw;      /* ~31.25px */
  --h5-font-size: 1.65vw;      /* ~25.01px */
  --h6-font-size: 1.32vw;       /* 20px */
  --p-font-size: 1vw;           /* 16px */
  --small-font-size: 0.9vw;;     /* 14px */
  --smaller-font-size: 0.842vw;     /* 12.8px */
  --smallest-font-size: 0.67vw;  /* 10.24px */
}


html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-primary);
  background: var(--page-default-background);
  color: var(--header-color);
  scroll-behavior: smooth;
  /* cursor: url('/Assets/cursor1.svg'), auto; */
}

   .loader-container {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    background: #000;
    z-index: 1001;
    transition: opacity 0.5s ease;
}

    .loader {
        width: 200px;
        height: 1px;
        background: linear-gradient(45deg, #a5a6ff, #a200ff, #a048ff);
        background-size: 200% 200%;
        border-radius: 0;
        animation: gradientFlow 2s linear infinite;
        position: relative;
        overflow: hidden;
    }
    .Logo, .LT{
        background: #000;
    }
    .LT{
        color: #8b8b8b;
        font-family: 'Arial';
        font-size: 11px;
        margin-top: -10px;
    }
    .loader::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: linear-gradient(45deg, #6a11cb, #2575fc, #6a11cb);
        filter: blur(8px);
        opacity: 0.4;
    }
    @keyframes gradientFlow {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
  }

.NotSuported{
  display: none;
}

@media (width < 700px){
  .NotSuported{
        display: block;
        position: absolute;
        bottom: 35vh;
        left: 50%;
        line-height: 1.1;
        transform: translateX(-50%);
        color: rgb(255, 185, 147);
        font-size: 1.5rem;
        text-align: center;
        font-weight: 700;
        letter-spacing: -0.05rem;
      }

      .NotSuported p{
        font-size: 0.5rem;
        white-space: nowrap;
        font-weight: 300;
        letter-spacing: -0.01rem;
      }
      .NotSuported h1{
        font-size: 3vw;
        margin-bottom: 2vw;
      }
}


img, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

::-webkit-scrollbar {
  display: none;
}

a {
  color: inherit;
  text-decoration: none;
}

h1 {
  font-size: var(--h1-font-size);
  background: linear-gradient(180deg, #7E7E7E, #E4E4E4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.8vw;
  letter-spacing: -0.2vw;
  height: 7.5vw;
}

h2 {
  font-size: var(--h2-font-size);
  letter-spacing: -0.12rem;
  color: var(--header-color);
}

h3 {
  font-size: var(--h3-font-size);
}

h4 {
  font-size: var(--h4-font-size);
}

h5 {
  font-size: var(--h5-font-size);
}

h6 {
  font-size: var(--h6-font-size);
}

p {
  font-size: var(--p-font-size);
  color: var(--gray-p-color);
}

.small {
  font-size: var(--small-font-size);
}

.smaller {
  font-size: var(--smaller-font-size);
}
.smallest {
  font-size: var(--smallest-font-size);
}
nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2.5vh 4vw;
  z-index: 999;
  color: var(--gray-p-color);
  font-weight: 300;
  background: linear-gradient(180deg,black, #00000000);
  font-size: 0.9vw;
}

.nav-logo{
  position: relative;
}
.nav-logo img{
    width: 13.5vw;
}
.nav-logo div img{
  position: absolute;
  width: 2.5vw;
  top: -3vh;
  right: -2.5vw;
  
}

.favicon{
  width: 3vw;
  height: auto;
  margin-right: 0.7rem;
}

.lsm1{
  letter-spacing: -0.065vw;
}
.lsm05{
  letter-spacing: -0.033vw;
}
.nav-links{
  display: flex;
  gap: 3rem;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
}
.nav-buttons{
  display: flex;
  gap: 0.5rem;
  align-items: center;
  justify-content: center;
}
.navCTA{
    background: var(--gray-bg-color);
    padding: 1.75vh 1.25vw;
    border-radius: 100vw;
    color: var(--header-color);
    font-weight: 500;
}
.hero{
  padding: 0 4vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}

h1 img{
    width: 12.6vw;
    /* height: auto; */
}
.lsm2{
  letter-spacing: -0.13vw;
}

.heroIMG{
    width: 13.5vw;
    margin-top: 1rem;
}
.quickCardContainers{
    width: 100%;
    display: flex;
    justify-content: space-between;
    position: absolute;
    bottom: 1.5vh;
    padding: 0 3vw;
}
.leftQC img:nth-child(1){
    margin-bottom: 0.75rem;
    width: 19.74vw;
}
.leftQC img:nth-child(2){
  width: 13.86vw;
}
.rightQC img:nth-child(1){
    margin-bottom: 0.75rem;
    width: 19.74vw;
}
.rightQC img:nth-child(2){
  width: 13.86vw;
}
.rightQC {
    display: flex;
    flex-direction: column;
    align-items: end;
}

.ProductVideo{
    margin: 3vh 0vw;
    display: flex;
    justify-content: center;
    align-items: center;
}


.highlightSection{
    margin: 35vh 5vw;
    display: flex;
    flex-direction: column;
    gap: 50vh;
    position: relative;
}

.highlightContainer{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6vw;
    position: sticky;
    top: 27vh;
    top: 27dvh
}
.highlightContainer video{
    width: 44vw;
    border-radius: 2vw;
}
.highlightContainer p{
    margin-top: 1rem;
    font-weight: 300;
    width: 30vw;
}



/* Feature Section */

.featureSection{
  margin: 25vh 4vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5vw;
}
.featureSection h2{
  font-size: 4.2vw;
 }
.featureContainer {
  margin: 2.5vh 0;
}

.FCfirst{
  display: flex;
  gap: 2vw;
  width: 100%;
  margin-bottom: 2vw;
}
.SpeakingMode{
  width: 27.78vw;
  height: 17vw;
  border-radius: var(--featureC-borderradius);
  background: url(Assets/SP.webp);
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  position: relative;
}

.SpeakingMode strong p{
  color: white;
  background: #0080FF;
  width: max-content;
  padding: 0.7rem 0.7rem;
  border-radius: 5rem;
  position: absolute;
  bottom:4vw;
  right: 4vw;
}
.SpeakingMode .small{
  color: white;
  width: 15vw;
  padding: 1rem;
  display: none;
}


.GPSConnectivity{
  background: var(--dark-teal-bg);
  height: 17vw;
  width: 18vw;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  gap: 1vw;
  border-radius: var(--featureC-borderradius);
}
.GPSConnectivity h4{
  color: #75F5FF;
  line-height: 1.1;
}
.GPSConnectivity svg{
  width: 7.5vw;
  height:7.5vw;
}
.viewCard{
  width: 27.78vw;
  height: 17vw;
  border-radius: var(--featureC-borderradius);
  background: #75F5FF;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  position: relative;
}
.viewCard h2{
  font-size: 4vw;
  color: #00B3C0;
  padding: 1.5vw 2vw;
}

.viewCard img{
  width: 18.5vw;
  object-fit: cover;
  position: absolute;
  right: -2vw;
  top: 0vw;
  /* background: #0080FF; */
}

.FCsecond{
  display: flex;
  gap: 2vw;
  width: 100%;
}

.Gsensor{
  background: var(--dark-teal-bg);
  height: 17vw;
  width: 17vw;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: var(--featureC-borderradius);
  position: relative;
}

.Gsensor h4{
  color: #75F5FF; 
  position: absolute;
  top: 3vw;
}

.Gsensor img{
  width: 14vw;
  height: 11vw;
}

.appSupport{
  width: 30vw;
  height: 17vw;
  border-radius: var(--featureC-borderradius);
  background: #75F5FF;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  display: flex;
  position: relative;
  overflow: hidden;
}

.appSupport h2{
  font-size: 4vw;
  color: #00B3C0;
  padding: 1.5vw 2vw;
}
.appSupport img{
  position: absolute;
  right: -4vw;
  bottom:-5vw;
  width: 17.9vw;
  rotate: -20deg
}
.nightMode{
    background: var(--dark-teal-bg);
  height: 17vw;
  width: 27vw;
  display: flex;
  flex-direction: column;
  text-align: center;
  justify-content: center;
  align-items: center;
  border-radius: var(--featureC-borderradius);
  position: relative;
  overflow: hidden;
}
.nightMode h2{
  color: #75F5FF; 
  padding: 1.5vw 2vw;
  position: absolute;
  bottom: 1vw;
  font-size: 3.3vw;
}
.nightMode img{
  width: 17vw;
  position: absolute;
  top: -9vw;
}


.variantSection{
  margin: 50vh 4vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15vw;
}
.Piqo1k{
  display: flex;
  align-items: end;
}
.Piqo1k img{
  width: 12vw;
  z-index: 1;
}

.Piqo1k div{
  display: flex;
  flex-direction: column;
  align-items: end;
  margin-bottom: 2vw;
  margin-right: -1.5vw;
}
.varSpec h4{
  font-weight: 300;
}
.varSpec h5{
  font-weight: 300;
  color: #8B8B8B;
}
.varSpec h6{
  font-weight: 300;
  color: #616161;
}

.ProductName{
  display: flex;
  color: white;
  gap: 0.5vw;
  margin-bottom: 0.3vw;
}

.ProductName svg{
  /* background: #0080FF; */
  width: 5.69vw;
}

.Piqo2k{
  margin-bottom: 8vw;
  display: flex;
  align-items: center;
}
.Piqo2k img{
  width: 12.5vw;
  z-index: 1;
}
.Piqo2k div{
  margin-bottom: -2vw;
  margin-left: -1.5vw;
}

.demoSection{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 25vh 4vw;
  position: relative;
}

.demoSection img{
  height: 80vh;
  height: auto;
  width: 80vw;
  border-radius: 1.5vw;
}

.playButton svg{
  width: 1.5vw;
  height:1.5vw;
  /* background: #0080FF; */
  padding-left: 0.25vw;
}
.playButton{
  position: absolute;
  background: #ffffff81;
  padding: 1.5vw;
  border-radius: 10rem;
}

/* Frame 37 */
.demoSection{
  display: flex;
  position: relative;
}
.demoOption{
  display: flex;
  align-items: center;
  /* gap: 0.5vw; */
  padding: 0.33vw;
  position: absolute;
  bottom: 1.5vw;
  background: hsla(0, 0%, 100%, 0.20);
  color: #000000;
  border-radius: 1.25vw;

}
.demoOption div{
  padding: 0.75vw 2vw;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3vw;
  border-radius: 0.98vw;
}
.demoOption p{
  color: white;
  font-weight: 300;
}
.demoOption strong{
  color: white;
  font-weight: 700;
}
.demoOptionActive{
  background: white;
  color: black;
}
.demoOptionActive strong{
  color: #000000;
}
.demoOptionActive p{
  color: #666666;
}

.userReviewSection{
  margin: 20vh 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1vw;
}
.userReviewSection h2{
  width: 90vw;
}
.userReviewSection div{
  display: flex;
  gap: 2vw;
}

.userReviewSection div img{
  height: 33vw;
  width: 16.5vw;
  object-fit:contain;
}


/* productDeatails */
.selectProduct{
  margin: 35vh 4vw 30vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2vw;
}
.header{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5vw;
}
.productDeatails img{
  width: 11vw;
}
.productDeatails{
  background: linear-gradient(180deg, #373737, #151515);
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 3vw 3.27vw;
  border-radius: 1.30vw;
  gap: 3.14vw;
}
.smallSpec{
  padding: 1.2vw 0 1vw ;
  display: flex;
  gap: 0.5vw;
}
.strikethrough{
  text-decoration: line-through;
}
.smallSpec p {
  padding:0.66vw 0.95vw ;
  border-radius: 10rem;
  background: #212121;
}
.ProductCTA{
  margin-top: 1.2vw;
  display: flex;
  gap: 0.8vw;
}

.ProductCTA p:nth-child(1){
  background: rgba(255, 255, 255, 0.1);
  padding: 0.98vw 1.3vw;
  border-radius: 0.66vw;
  font-weight: 600;
}
.ProductCTA p:nth-child(2){
  background: rgb(255, 255, 255);
  color: #000000;
  padding: 0.98vw 1.3vw;
  border-radius: 0.66vw;
  font-weight: 700;
}
.product2spec {
  text-align: end;
}
.product2spec .ProductName{
  justify-content: end;
}
.product2spec .ProductCTA{
  justify-content: end;
}

.planSection{
  margin: 25vh 4vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2.5vw;
}

.Plans{
  display: flex;
  gap: 2vw;
}
.freePlan{
  width: 19.085vw;
  height: 26.4vw;
  margin-left: 2vw;
}
.premiumPlan{
  width: 43.53vw;
  height: 26.4vw;
  display: flex;
  gap: 4vw;
  justify-content: center;
  align-items: center;
  background: linear-gradient(180deg, #A19EFF, #494699);
  border-radius: 1.5vw;
}
.premiumPlan img{
  width: 16vw;
  height: 18vw;
}
.KeyBenifits div{
  display: flex;
  gap: 0.5vw;
  margin-top: 2vh;
}
.KeyBenifits img{
  width: 1.64vw;
  height: 1.64vw;
}
.KeyBenifits p{
  color: white;
  font-weight: 300;
}
.KeyBenifits h6{
  color: white;
  margin-bottom: 1.5vh;
}

.KeyBenifits button{
  all: unset;
  font-size: 1.2vw;
  font-weight: 700;
  color: #5855AB;
  background: white;
  text-align: center;
  width: 100%;
  padding: 2.3vh 0.655vw;
  margin-top: 2vh;
  border-radius: 0.3vw;
}

.downloadApp{
  margin: 20vh 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.downloadApp p{
  width: 23vw;
  margin-top: .5vw;
  margin-bottom: -1.5vw;
}
.AppDownloadButton{
  display: flex;
  gap: 1vw
}
.AppDownloadButton img{
  width: 9.7vw;
}
.appmockup{
  width: 45.75vw;
  margin-left: -3vw;
}

.footer img{
  width: 100%;
  height: auto;
}