/* ============================================================
   SURAJ AVATAR — reusable SVG snippets
   Pasted inline at multiple places on the homepage.
   The "look" is consistent: dark circle, red accent, friendly.
   ============================================================ */

/* Avatar — large variant (used in hero + CTA) */
.avatar-large {
  width: 200px; height: 200px;
  border-radius: 50%;
  background: #15151a;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 16px 48px rgba(21,21,26,0.15);
}

/* Avatar — small variant (inline in chapter headers) */
.avatar-small {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: #15151a;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle;
  flex-shrink: 0;
  box-shadow: 0 6px 16px rgba(21,21,26,0.1);
}

/* Avatar — tiny variant (next to the footer mark) */
.avatar-tiny {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: #15151a;
  display: inline-flex; align-items: center; justify-content: center;
  vertical-align: middle;
}

/* Floating avatar pattern (used in proof section) */
.avatar-float {
  position: absolute;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: #15151a;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 36px rgba(21,21,26,0.12);
  animation: avatar-bob 4s ease-in-out infinite;
}
@keyframes avatar-bob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-8px) rotate(2deg); }
}

/* Layout helpers for avatar + text side-by-side */
.avatar-with-text {
  display: flex;
  align-items: center;
  gap: 14px;
}
.avatar-with-text-vertical {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}