body{background: #121212;}
    .section-title {
        margin-bottom: 2rem;
    }
    h4{
      font-weight: normal;
    }
    .space-top{margin-top: 4.6rem;}
.narrow-height{line-height: 1.6; margin-bottom: 1.4rem;}

ul li::marker {
  color: #fff;
}
.feature_columns > .icon,
.feature_columns > h4,
.feature_columns > p > .text-white{
  transition: color .5s;
}
.feature_columns:hover > .icon,
.feature_columns:hover > h4,
.feature_columns:hover > p > .text-white{
  color:#9B5DE5;
}
.table th{
  color:#fff;
  font-weight:normal;
}
.table > tbody > tr > td{
  padding: 24px 8px;
}
.table > thead > tr > th{
  border:none;
}
.table > tbody > tr > td{
  border-top:none;
  vertical-align: middle;
}
.table > tbody > tr:nth-child(odd){
  background-color: #212121;
}
sub, sup {
    font-size: 55%;
    color: #888888;
}
.section-nr{
  position:absolute;
  left:-70px;
}
.wrap{
  display: flex;
  flex-wrap: wrap;
}
/* .cards{
background: linear-gradient(45deg,rgba(33, 33, 33, 1) 0%, rgba(33, 33, 33, 0) 65%);
} */
.project-title{
    font-weight: 100;
    font-size: 4.142rem;
    letter-spacing: 0;
    margin-bottom:5rem;
    font-family: "Roboto", sans-serif;
}
.section {
    padding: 2rem 0;
}
#mesh-container {
    position: fixed;
    /* overflow: hidden; */
    top:0%;
    left: 0%;
    width: 25%;  /* target width */
    height:100%; /* target height */
    z-index: -1;
  }
  .mouse {
    width: 20px;
    height: 32px;
    border-radius: 15px;
    border: 1px solid #fff;
    position: absolute;
    overflow: hidden;
    left: 50%;
    bottom:20px;
    z-index: 20;
}
.mouse .roll {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 4px;
    margin-left: -2px;
    height: 4px;
    border-radius: 4px;
    background: #fff;
    -webkit-animation: mouseScroll .8s cubic-bezier(.7,0,.3,1) infinite alternate;
    animation: mouseScroll .8s cubic-bezier(.7,0,.3,1) infinite alternate;
    z-index: 2;
}
.mouse .rollshadow {
    position: absolute;
    top: 6px;
    left: 50%;
    width: 4px;
    margin-left: -2px;
    height: 4px;
    background: #333;
    border-radius: 4px;
    -webkit-animation: mouseScroll .8s cubic-bezier(.7,0,.3,1) infinite alternate;
    animation: mouseScroll .8s cubic-bezier(.7,0,.3,1) infinite alternate;
        animation-delay: 0s;
    -webkit-animation-delay: 80ms;
    animation-delay: 80ms;
    z-index: 1;
}
@-webkit-keyframes mouseScroll {
 0% {
  -webkit-transform:translateY(0);
  transform:translateY(0)
 }
 100% {
  -webkit-transform:translateY(14px);
  transform:translateY(14px)
 }
}
@keyframes mouseScroll {
 0% {
  -webkit-transform:translateY(0);
  transform:translateY(0)
 }
 100% {
  -webkit-transform:translateY(14px);
  transform:translateY(14px)
 }
}

.flowchart {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  margin: 3rem 0 1rem 0;
}

.flow-box {
  position: relative;
  overflow: hidden;
  flex: 0 0 240px;
  height: 120px;
  background: #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border-radius: 8px; */
  text-align: center;
  padding: 0 3rem;
  z-index: 0;
  clip-path: polygon(0 0, 100% 0, 100% 68%, 46% 100%, 0 68%);
  clip-path: polygon(0 100%, 0 0, 90% 0, 100% 50%, 90% 100%);
  clip-path: polygon(0 0, 85% 0%, 100% 50%, 85% 100%, 0 100%, 15% 50%);
}

/* sliding effect overlay */
.flow-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: #9B5DE5;
  z-index: -1;
  transition: left 0.8s linear;
}

.flow-box.active::before {
  left: 0;
}

/* On small screens: stack vertically */
@media (max-width: 600px) {
  .flowchart {
    flex-direction: column;
  }
  .flow-box {
    width: 100%;
    max-width: 300px;
  }
}

.video-section-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;   /* crop overflow */
  z-index: 0;         /* keep it behind */
}

.video-section-bg video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;  /* behaves like background-size: cover */
  transform: translate(-50%, -50%); /* keep it centered */
}
.video-section video {
  position: relative;
  width: 100%;
  height: auto;
}

.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(27, 27, 27, 0.5);
    /* background-color: linear-gradient(50deg,rgba(155, 93, 229, 0.69) 0%, rgba(80, 170, 222, 0.7) 50%, rgba(93, 95, 229, 0.7) 100%); */
    background-image: url(images/bg/mask-pattern.png);
    /* mix-blend-mode: screen; */
    background-repeat: repeat;
    z-index: 10;
}

  .browser-wrap *{box-sizing:border-box}

  /* Outer container that holds the browser frame */
  .browser-wrap{
    width:90%; 
    /* width:920px; default desktop width */
    /* max-width:95vw; */
    border-radius:14px;
    background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    box-shadow: 0 10px 30px rgba(2,6,23,0.7), inset 0 1px 0 rgba(255,255,255,0.02);
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.03);
    display:flex;
    flex-direction:column;
    margin: 0 auto;
  }

  /* Top bar */
  .browser-wrap .browser-top{
    height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
    /* background: linear-gradient(180deg, rgba(255,255,255,0.012), transparent); */
    background: #212121;
    border-bottom: 1px solid rgba(255,255,255,0.02);
  }

  /* Left controls (dots) */
  .browser-wrap .controls{display:flex;gap:8px;align-items:center}
  .browser-wrap .dot{width:12px;height:12px;border-radius:999px;box-shadow: 0 1px 0 rgba(0,0,0,0.6) inset}
  .browser-wrap .dot.cl{background:linear-gradient(180deg,#ff5f56,#e6453b) !important}
  .browser-wrap .dot.min{background:linear-gradient(180deg,#ffbd2e,#ff9f1a)}
  .browser-wrap .dot.max{background:linear-gradient(180deg,#27c93f,#13a10a)}

  /* Middle area: fake tab and address */
  .browser-wrap .center{
    flex:1;display:flex;align-items:center;justify-content:center;gap:12px;
  }
  .browser-wrap .tab{
    height:32px;padding:0 12px;border-radius:6px;display:flex;align-items:center;gap:8px;background:transparent;font-size:13px;user-select:none
  }
  .browser-wrap .tab.active{color:#fff}

  .browser-wrap .address{
    flex:1;
    max-width:720px;
    margin: 0 20px 0 0;
    height:36px;border-radius:8px;padding:0 12px;display:flex;align-items:center;gap:8px;background:#111;border:1px solid rgba(255,255,255,0.02);box-shadow:0 2px 8px rgba(2,6,23,0.6) inset
  }
  .browser-wrap .address input{flex:1;background:transparent;border:0;outline:none;font-size:13px;height:100%}
  .browser-wrap .address .lock{width:14px;height:14px;border-radius:3px;background:var(--glass);display:inline-block}

  /* Right controls */
  .browser-wrap .right{display:flex;gap:10px;align-items:center;color:var(--muted);font-size:13px}
  .browser-wrap .expand-btn{cursor:pointer;user-select:none}

  /* The viewport where the image will be shown and scrolled */
  .browser-wrap .viewport{
    background:linear-gradient(180deg,#07080a,#0b0d10);
    flex:1;
    height:640px; /* fallback height */
    /* overflow:auto;  allows scrolling of tall image */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
    padding:0;
    display:flex;justify-content:center;align-items:flex-start
  }
  /* Secondary tab bar */
    .browser-wrap .sub-tabs{
      display:flex;
      gap:8px;
      padding:8px 14px 6px 14px;
      background:#181818;
      border-bottom:1px solid rgba(255,255,255,0.02);
    }
    .browser-wrap .sub-tab{
      padding:2px 14px;
      border-radius:6px;
      background:var(--panel);
      color:var(--muted);
      font-size:13px;
      cursor:pointer;
      user-select:none;
      transition:all .2s;
      font-size:80%;
    }
    .browser-wrap .sub-tab.active{
      background:#9B5DE5;
      color:#fff;
    }

  /* Holder that enforces image aspect ratio */
  .browser-wrap .screenshot-holder{
    width:100%;
    /* max-width:800px; */
    aspect-ratio: 16/9; /* maintain landscape ratio */
    /* border-radius:10px; */
    overflow:hidden;
    overflow-y: scroll;
    overscroll-behavior: auto;
    box-shadow: 0 8px 30px rgba(2,6,23,0.6);
    /* border:1px solid rgba(255,255,255,0.03); */
    -webkit-overflow-scrolling:touch;
    scrollbar-width:thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
    display:flex;
    flex-direction:column;
  }

  .browser-wrap .screenshot-holder img{display:block;width:100%;height:auto;user-select:none;flex:1}

  /* Custom scrollbar for Webkit */
  .browser-wrap .screenshot-holder::-webkit-scrollbar{width:10px}
  .browser-wrap .screenshot-holder::-webkit-scrollbar-track{background:transparent}
  .browser-wrap .screenshot-holder::-webkit-scrollbar-thumb{background:linear-gradient(180deg, rgba(255,255,255,0.12), rgba(255,255,255,0.06));border-radius:999px;border:2px solid transparent;background-clip:padding-box}

  /* Smaller / compact mode for narrow screens */
  @media (max-width:640px){
    .browser-wrap{width:100%}
    .browser-wrap .address{width:100%}
    .browser-wrap .viewport{height:480px}
    .browser-wrap .screenshot-holder{max-width:100%;aspect-ratio: 9/16;} /* portrait mode */
  }

  /* helper for keyboard focus */
  .browser-wrap .screenshot-holder:focus{outline:2px solid rgba(59,130,246,0.12)}
 

  .fullscreen_screenshot {
    width: 90%;
    height: 90%;
    position: fixed;
    top: 5%;
    left: 5%;
    z-index: 999;
    background-color: #07080a;
    overflow: hidden; /* keep outer fixed container clean */
    display: none;
  }
  .fullscreen_screenshot .minimize{
    width: 30px;
    height: 30px;
    background-color: #302d35;
    color:#fff;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 10;
    text-align: center;
    cursor: pointer;
  }

  .fullscreen_screenshot .inner_scroll {
    width: 100%;
    height: 100%; /* take full height of parent */
    position: relative;
    overflow-y: auto; /* enable scrolling */
  }

  .fullscreen_screenshot .inner_scroll img {
    width: 100%;
    height: auto; /* keep proportions */
    display: block; /* removes inline gap issues */
  }