.grsr-wrap{
  --dur: 140s;
  --w: 280px;
  --lines: 3;
  padding: 50px 16px;
  border-radius: 28px;
  overflow: hidden;
  background:
    radial-gradient(1100px 320px at 20% 15%, rgba(0,182,122,0.20), transparent 60%),
    linear-gradient(135deg,#0b1221,#111c33);
}

.grsr-hero{ text-align:center; margin-bottom: 26px; color:#e2e8f0; }
.grsr-head{ margin: 0 0 6px 0; font-size: 26px; }
.grsr-sub{ margin: 0; color: rgba(226,232,240,0.78); }

.grsr-viewport{ overflow:hidden; width:100%; }

.grsr-track{
  display: inline-flex;
  gap: 20px;
  white-space: nowrap;
  will-change: transform;
  animation: grsr-scroll var(--dur) linear infinite;
}

.grsr-pause:hover .grsr-track{ animation-play-state: paused; }

.grsr-card{
  flex: 0 0 auto;
  width: var(--w);
  max-width: var(--w);
  padding: 18px;
  border-radius: 22px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 18px 60px rgba(0,0,0,0.25);
  color: #fff;
}

.grsr-stars{
  letter-spacing: 3px;
  font-size: 16px;
  line-height: 1;
  background: linear-gradient(90deg,#00b67a,#00b67a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.grsr-text{
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: var(--lines);
  -webkit-box-orient: vertical;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}

@keyframes grsr-scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* iPhone safe mode, only apply on iOS Safari using feature detect */
@supports (-webkit-touch-callout: none) {
  .grsr-ios-swipe .grsr-track{
    animation: none !important;
    transform: none !important;
  }
  .grsr-ios-swipe .grsr-viewport{
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 768px){
  .grsr-wrap{ padding: 40px 12px; }
}