:root{
  --shw-bg:#000;
  --shw-accent:#2bb59b;
  --shw-text:#dfeff0;
  --shw-muted:#9aa6a6;
}

.shw-hero{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  background: var(--shw-bg);
  color:var(--shw-text);
  padding:40px;
  min-height:420px;
  position:relative;
  overflow:hidden;
  border-radius:6px;
  box-sizing:border-box;
}

.shw-left{
  width:45%;
  max-width:720px;
}
.shw-title{
  font-size:4rem;
  margin:0 0 10px;
  color:rgba(180,210,210,0.12); /* subtle big name effect can tweak */
  letter-spacing:1px;
  color:var(--shw-accent);
}
.shw-content{
  color:var(--shw-text);
  font-size:1.05rem;
  line-height:1.6;
  margin-bottom:22px;
}
.shw-cta{
  display:inline-block;
  padding:22px 32px;
  border-radius:30px;
  background:#2bb59b;
  color:#000;
  text-decoration:none;
  border:2px solid #2bb59b(120,160,150,0.12);
  font-weight:700;
}

.shw-right{
  width:45%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* portrait */
.shw-portrait{
  width:320px;
  border-radius:6px;
  position:relative;
  z-index:6;
  box-shadow: 0 12px 30px rgba(0,0,0,0.7);
  object-fit:cover;
}

/* rotating ring (SVG) */
.shw-ring{
  position:absolute;
  width:460px;
  height:460px;
  z-index:3;
  right:-40px;
  top: -40px;
  transform-origin:center;
  color:var(--shw-accent);
  opacity:0.9;
  animation:shw-rotate 18s linear infinite;
  pointer-events:none;
}

/* bubbles */
.shw-bubbles{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.bubble{
  position:absolute;
  border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.15), rgba(0,0,0,0.15));
  box-shadow: inset -6px -6px 18px rgba(0,0,0,0.5);
  opacity:0.95;
  transform:translate3d(0,0,0);
}

/* individual sizes and animations */
.b1{ width:92px; height:92px; right:20px; top:40px; animation:floaty 6s ease-in-out infinite; }
.b2{ width:58px; height:58px; right:120px; top:140px; animation:floaty 8s ease-in-out infinite; animation-delay:0.8s; }
.b3{ width:72px; height:72px; right:80px; top:240px; animation:floaty 10s ease-in-out infinite; animation-delay:1.5s; }
.b4{ width:40px; height:40px; right:220px; top:70px; animation:floaty 7s ease-in-out infinite; animation-delay:2s; }

/* subtle rotate for the ring ticks (another layer) */
@keyframes shw-rotate {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* floating motion */
@keyframes floaty {
  0% { transform: translateY(0) translateX(0) rotate(0); opacity:0.95; }
  50% { transform: translateY(-18px) translateX(6px) rotate(6deg); opacity:1; }
  100% { transform: translateY(0) translateX(0) rotate(0); opacity:0.95; }
}

/* responsive */
@media (max-width:900px){
  .shw-hero{ flex-direction:column; text-align:center; padding:30px; min-height:auto; }
  .shw-left,.shw-right{ width:100%; }
  .shw-title{ font-size:30px; text-align: left;}
  .shw-ring{ width:360px; height:360px; right:-60px; top:-60px; }
  .shw-portrait{ width:260px; margin:18px auto 0; }
}