/* ================= GX9 ABOUT SECTION ================= */

.gx9ab-section{
  position:relative;
  padding:90px 6% 70px;
  background:#ffffff;
  overflow:hidden;
  color:#222;
}

/* MOSAIC BACKGROUND */
.gx9ab-mosaic{
  position:absolute;
  inset:0;
  z-index:0;
  background:
    linear-gradient(135deg, rgba(138,92,255,.08), rgba(255,255,255,.95)),
    repeating-linear-gradient(
      45deg,
      rgba(0,0,0,.035) 0,
      rgba(0,0,0,.035) 1px,
      transparent 1px,
      transparent 28px
    ),
    repeating-linear-gradient(
      -45deg,
      rgba(0,0,0,.035) 0,
      rgba(0,0,0,.035) 1px,
      transparent 1px,
      transparent 28px
    );
  animation:gx9abMosaicFloat 14s ease-in-out infinite;
}

@keyframes gx9abMosaicFloat{
  0%{transform:scale(1);}
  50%{transform:scale(1.02);}
  100%{transform:scale(1);}
}

.gx9ab-wrapper{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1fr 1.2fr;
  gap:70px;
  align-items:center;
}

/* CONTENT */
.gx9ab-label{
  font-size:14px;
  letter-spacing:4px;
  font-weight:700;
  color:#8a5cff;
  margin-bottom:12px;
}

.gx9ab-content h2{
  font-size:44px;
  font-weight:800;
  line-height:1.15;
  margin-bottom:22px;
}

.gx9ab-content h2 span{
  background:linear-gradient(90deg,#b85cff,#4f8cff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.gx9ab-content p{
  font-size:15px;
  line-height:1.9;
  max-width:520px;
}

/* STATS */
.gx9ab-stats{
  display:flex;
  gap:40px;
  margin:22px 0;
}

.gx9ab-stats h3{
  font-size:34px;
  background:linear-gradient(90deg,#b85cff,#4f8cff);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

/* BUTTON */
.gx9ab-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:14px 38px;
  font-size:14px;
  font-weight:600;
  color:#fff;
  border-radius:999px;
  background:linear-gradient(90deg,#b85cff,#4f8cff);
  box-shadow:0 18px 36px rgba(79,140,255,.35);
  position:relative;
  overflow:hidden;
  transition:.35s ease;
}

.gx9ab-btn span{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.25);
  opacity:0;
  transition:.35s ease;
}

.gx9ab-btn:hover span{opacity:1;}
.gx9ab-btn:hover{transform:translateY(-3px);}

/* VIDEO */
.gx9ab-video-frame{
  position:relative;
  max-width:650px;
  padding:12px;
  border-radius:26px;
  background:linear-gradient(135deg,#b85cff,#4f8cff);
  box-shadow:0 30px 65px rgba(0,0,0,.25);
  cursor:pointer;
}

.gx9ab-video-frame img{
  width:100%;
  aspect-ratio:16/9;
  border-radius:20px;
  transition:.45s ease;
}

.gx9ab-play-btn{
  position:absolute;
  inset:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:72px;
  color:#fff;
  background:rgba(0,0,0,.45);
  border-radius:20px;
  transition:.4s ease;
}

.gx9ab-video-frame:hover img{transform:scale(1.05);}
.gx9ab-video-frame:hover .gx9ab-play-btn{
  background:rgba(0,0,0,.75);
}

/* MODAL */
.gx9ab-modal{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.85);
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  visibility:hidden;
  transition:.4s ease;
  z-index:9999;
}

.gx9ab-modal.gx9ab-active{
  opacity:1;
  visibility:visible;
}

.gx9ab-video-box{
  position:relative;
  width:90%;
  max-width:900px;
  aspect-ratio:16/9;
}

.gx9ab-video-box iframe{
  width:100%;
  height:100%;
  border-radius:18px;
}

.gx9ab-close{
  position:absolute;
  top:-45px;
  right:0;
  font-size:36px;
  color:#fff;
  cursor:pointer;
}

/* SCROLL ANIMATION */
.gx9ab-seq{
  opacity:0;
  transform:translateY(40px);
  transition:.8s ease;
}

.gx9ab-seq.gx9ab-show{
  opacity:1;
  transform:translateY(0);
}

/* RESPONSIVE */
@media(max-width:768px){
  .gx9ab-wrapper{
    grid-template-columns:1fr;
    gap:50px;
  }

  .gx9ab-content h2{
    font-size:32px;
  }
}