/* BEADS section and SOFTWARE order adjustment */

.sg-beads-section{
  padding:110px 0;
  background:#FFFFFF;
}

.sg-beads-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:64px;
  align-items:center;
}

.sg-beads-image{
  position:relative;
}

.sg-beads-image img{
  width:100%;
  height:auto;
  display:block;
  border-radius:18px;
  box-shadow:0 24px 70px rgba(15,23,42,.16);
}

.sg-beads-image::before{
  content:"";
  position:absolute;
  inset:-16px;
  background:radial-gradient(circle at center, rgba(6,182,212,.10), transparent 70%);
  z-index:-1;
  filter:blur(28px);
}

.sg-beads-content{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.sg-beads-content h2{
  font-size:38px;
  line-height:1.45;
  letter-spacing:.03em;
  color:#0F172A;
  margin:0;
}

.sg-beads-content p{
  font-size:16px;
  line-height:2;
  color:#64748B;
  margin:0;
}

.sg-beads-list{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.sg-beads-list li{
  position:relative;
  padding-left:24px;
  color:#334155;
  font-size:15px;
  line-height:1.55;
}

.sg-beads-list li::before{
  content:"";
  position:absolute;
  left:0;
  top:.62em;
  width:8px;
  height:8px;
  border-radius:999px;
  background:#06B6D4;
  box-shadow:0 0 10px rgba(6,182,212,.65);
}

.sg-beads-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:220px;
  height:52px;
  margin-top:4px;
  border-radius:999px;
  background:#0F172A;
  color:#FFFFFF !important;
  text-decoration:none !important;
  font-weight:700;
  letter-spacing:.08em;
  transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.sg-beads-button:hover{
  transform:translateY(-2px);
  background:#06B6D4;
  box-shadow:0 14px 30px rgba(6,182,212,.28);
}

/* PC: SOFTWARE = left text / right image */
.sg-software-grid .sg-software-content{
  order:1;
}

.sg-software-grid .sg-software-image{
  order:2;
}

/* Mobile: BEADS and SOFTWARE = image first / text second */
@media(max-width:900px){
  .sg-beads-grid,
  .sg-software-grid{
    grid-template-columns:1fr;
    gap:38px;
  }

  .sg-beads-image{
    order:1;
  }

  .sg-beads-content{
    order:2;
  }

  .sg-software-grid .sg-software-image{
    order:1;
  }

  .sg-software-grid .sg-software-content{
    order:2;
  }

  .sg-beads-content h2{
    font-size:30px;
  }
}

@media(max-width:640px){
  .sg-beads-section{
    padding:76px 0;
  }

  .sg-beads-content h2{
    font-size:26px;
  }

  .sg-beads-content p{
    font-size:15px;
    line-height:1.9;
  }

  .sg-beads-list li{
    font-size:14px;
  }

  .sg-beads-button{
    width:100%;
  }
}