/* OFF page layout utilities (replaces inline style attributes) */

.off-container-z1 {
  position: relative;
  z-index: 1;
}

.course-card--clip {
  overflow: hidden;
}

.off-section-timer {
  margin: 4rem 0;
}

/* Decorative blobs */
.blob--hero-a {
  width: 500px;
  height: 500px;
  background: rgba(46, 204, 113, 0.07);
  top: -150px;
  right: -150px;
}

.blob--hero-b {
  width: 400px;
  height: 400px;
  background: rgba(168, 224, 99, 0.05);
  top: 100px;
  left: -120px;
}

.blob--features-a {
  width: 400px;
  height: 400px;
  background: rgba(46, 204, 113, 0.06);
  top: -100px;
  right: -100px;
}

.blob--features-b {
  width: 300px;
  height: 300px;
  background: rgba(168, 224, 99, 0.05);
  bottom: 0;
  left: -80px;
}

.blob--courses {
  width: 350px;
  height: 350px;
  background: rgba(249, 202, 36, 0.05);
  top: 50px;
  left: -80px;
}

.blob--pricing {
  width: 500px;
  height: 500px;
  background: rgba(46, 204, 113, 0.04);
  top: 0;
  right: -150px;
}

.blob--comments {
  width: 400px;
  height: 400px;
  background: rgba(253, 121, 168, 0.04);
  bottom: 50px;
  right: -100px;
}

/* Rotating feature circles */
.rotating-border--code {
  animation-duration: 5s;
  border-top-color: var(--spring-yellow);
  border-right-color: var(--spring-pink);
}

.circle-icon--code {
  color: var(--spring-yellow);
  filter: drop-shadow(0 0 6px rgba(249, 202, 36, 0.7));
}

.circle-badge--projects {
  color: var(--spring-pink);
  background: rgba(253, 121, 168, 0.1);
  border-color: rgba(253, 121, 168, 0.3);
}

.rotating-border--cert {
  animation-duration: 3s;
  border-top-color: var(--spring-sky);
  border-right-color: var(--spring-green);
}

.circle-icon--cert {
  color: var(--spring-sky);
  filter: drop-shadow(0 0 6px rgba(116, 185, 255, 0.7));
}

.circle-badge--ai {
  color: var(--spring-sky);
  background: rgba(116, 185, 255, 0.1);
  border-color: rgba(116, 185, 255, 0.3);
}

.rotating-border--support {
  animation-duration: 6s;
  border-top-color: var(--spring-pink);
  border-right-color: var(--spring-lime);
}

.circle-icon--support {
  color: var(--spring-pink);
  filter: drop-shadow(0 0 6px rgba(253, 121, 168, 0.7));
}

.circle-badge--online {
  color: var(--spring-lime);
  background: rgba(168, 224, 99, 0.1);
  border-color: rgba(168, 224, 99, 0.3);
}

/* Feature card icons */
.fc-icon--green {
  background: rgba(46, 204, 113, 0.12);
  color: var(--spring-green);
}

.fc-icon--yellow {
  background: rgba(249, 202, 36, 0.12);
  color: var(--spring-yellow);
}

.fc-icon--pink {
  background: rgba(253, 121, 168, 0.12);
  color: var(--spring-pink);
}

.fc-icon--sky {
  background: rgba(116, 185, 255, 0.12);
  color: var(--spring-sky);
}

/* Discount course badges */
.course-badge--react {
  color: var(--spring-sky);
  background: rgba(116, 185, 255, 0.1);
  border-color: rgba(116, 185, 255, 0.3);
}

.course-badge--php {
  color: var(--spring-pink);
  background: rgba(253, 121, 168, 0.1);
  border-color: rgba(253, 121, 168, 0.3);
}

/* Stats bar */
.off-stat-value--yellow {
  font-size: 2rem;
  font-weight: 900;
  color: var(--spring-yellow);
}

.off-stat-value--green {
  font-size: 2rem;
  font-weight: 900;
  color: var(--spring-green);
}

.off-stat-value--sky {
  font-size: 2rem;
  font-weight: 900;
  color: var(--spring-sky);
}

.off-stat-value--pink {
  font-size: 2rem;
  font-weight: 900;
  color: var(--spring-pink);
}

.off-stat-label {
  font-size: 0.8rem;
  color: var(--spring-muted);
}

.comment-text--justify {
  text-align: justify;
}

.comment-avatar--pink {
  background: linear-gradient(135deg, var(--spring-pink), #e84393);
}

.comment-avatar--sky {
  background: linear-gradient(135deg, var(--spring-sky), #0984e3);
}

.comment-avatar--yellow {
  background: linear-gradient(135deg, var(--spring-yellow), #e67e22);
}

.comment-avatar--lime {
  background: linear-gradient(135deg, var(--spring-lime), #27ae60);
}

.comment-avatar--video {
  width: 36px;
  height: 36px;
  font-size: 0.85rem;
}

.comment-avatar--video-yellow {
  width: 36px;
  height: 36px;
  font-size: 0.85rem;
  background: linear-gradient(135deg, var(--spring-yellow), #e67e22);
}

.comment-avatar--video-pink {
  width: 36px;
  height: 36px;
  font-size: 0.85rem;
  background: linear-gradient(135deg, var(--spring-pink), #e84393);
}

.comment-name--sm {
  font-size: 0.85rem;
}

.page-skeleton__shimmer--block {
  display: block;
}